/**
 * YBÁ Market Pro - Frontend Styles
 * 
 * Compact, premium styling for discount displays and club promotions.
 * 
 * @package YBA_Market_Pro
 * @since 2.1.3
 */

/* ============================================
   CSS Variables
   ============================================ */
:root {
  --yba-primary: #89b864;
  --yba-primary-dark: #7ab055;
  --yba-primary-light: #a8d087;
  --yba-primary-gradient: linear-gradient(135deg, #89b864 0%, #7ab055 100%);
  --yba-text: #2d3748;
  --yba-text-light: #718096;
  --yba-border: #e2e8f0;
  --yba-shadow: 0 2px 8px rgba(137, 184, 100, 0.12);
  --yba-radius: 10px;
  --yba-transition: all 0.2s ease;
}

/* ============================================
   Shimmer Animation
   ============================================ */
@keyframes yba-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes yba-pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(137, 184, 100, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(137, 184, 100, 0.5);
  }
}

/* ============================================
   Discount Info Box - Product Page (COMPACT)
   ============================================ */
.yba-discount-info-box {
  margin: 12px 0;
}

/* Active Discount - Club Member (COMPACT + SHIMMER) */
.yba-discount-active {
  background: linear-gradient(
    90deg,
    #89b864 0%,
    #9dc87a 25%,
    #89b864 50%,
    #9dc87a 75%,
    #89b864 100%
  );
  background-size: 200% 100%;
  animation: yba-shimmer 3s linear infinite;
  border-radius: var(--yba-radius);
  will-change: background-position;
  padding: 12px 16px;
  text-align: center;
  box-shadow: var(--yba-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.yba-discount-active__title {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.yba-discount-active__amount {
  color: white;
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  opacity: 0.95;
}

.yba-discount-active h4,
.yba-discount-active p {
  margin: 0;
}

/* Club Invitation - Non-Member (COMPACT) */
.yba-clube-invitation {
  background: #fafff7;
  border: 1px solid var(--yba-primary);
  border-radius: var(--yba-radius);
  padding: 14px 16px;
  text-align: center;
  transition: var(--yba-transition);
  box-shadow: var(--yba-shadow);
}

.yba-clube-invitation:hover {
  box-shadow: 0 4px 12px rgba(137, 184, 100, 0.2);
}

.yba-clube-invitation__icon {
  font-size: 18px;
  margin-right: 6px;
  display: inline;
}

.yba-clube-invitation__title {
  color: var(--yba-primary-dark);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px 0;
  display: inline;
}

.yba-clube-invitation__savings {
  color: var(--yba-text);
  font-size: 13px;
  margin: 0 0 10px 0;
}

.yba-clube-invitation__savings strong {
  color: var(--yba-primary-dark);
  font-size: 14px;
}

.yba-clube-invitation__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--yba-primary-gradient);
  color: white !important;
  text-decoration: none !important;
  padding: 8px 18px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: var(--yba-transition);
}

.yba-clube-invitation__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(137, 184, 100, 0.4);
}

.yba-clube-invitation__cta::after {
  content: "→";
  font-size: 12px;
}

/* Login Prompt (COMPACT) */
.yba-clube-login {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid var(--yba-primary);
  border-radius: var(--yba-radius);
  padding: 12px 16px;
  text-align: center;
}

.yba-clube-login__text {
  color: var(--yba-text);
  font-size: 16px;
  text-wrap: balance;
  margin: 0 0 10px 0;
}

.yba-clube-login__text strong {
  color: var(--yba-primary-dark);
}

.yba-clube-login__buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.yba-clube-login__btn {
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 12px;
  text-decoration: none !important;
  transition: var(--yba-transition);
}

.yba-clube-login__btn--login {
  background: white;
  color: var(--yba-text) !important;
  border: 1px solid var(--yba-border);
}

.yba-clube-login__btn--login:hover {
  border-color: var(--yba-primary);
  color: var(--yba-primary-dark) !important;
}

.yba-clube-login__btn--join {
  background: var(--yba-primary-gradient);
  color: white !important;
  border: none;
}

.yba-clube-login__btn--join:hover {
  box-shadow: 0 2px 8px rgba(137, 184, 100, 0.4);
}

/* ============================================
   Cart Savings Display (PREMIUM - APPLIES TO CELLS)
   Using higher specificity for WooCommerce
   ============================================ */
.woocommerce-cart-form ~ .cart-collaterals .yba-cart-savings,
.woocommerce .yba-cart-savings,
.cart_totals .yba-cart-savings,
tr.yba-cart-savings {
  background: transparent !important;
}

/* Style the cells directly since TR doesn't support pseudo-elements */
.woocommerce-cart-form ~ .cart-collaterals .yba-cart-savings th,
.woocommerce-cart-form ~ .cart-collaterals .yba-cart-savings td,
.woocommerce .yba-cart-savings th,
.woocommerce .yba-cart-savings td,
.cart_totals .yba-cart-savings th,
.cart_totals .yba-cart-savings td,
tr.yba-cart-savings th,
tr.yba-cart-savings td,
.yba-cart-savings th,
.yba-cart-savings td {
  background: linear-gradient(
    90deg,
    #89b864 0%,
    #9dc87a 25%,
    #89b864 50%,
    #9dc87a 75%,
    #89b864 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: yba-shimmer 3s linear infinite !important;
  padding: 16px 14px !important;
  vertical-align: middle !important;
}

.woocommerce .yba-cart-savings__label,
.cart_totals .yba-cart-savings__label,
tr.yba-cart-savings .yba-cart-savings__label,
.yba-cart-savings__label,
.yba-cart-savings th {
  color: white !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

.woocommerce .yba-cart-savings__amount,
.cart_totals .yba-cart-savings__amount,
tr.yba-cart-savings .yba-cart-savings__amount,
.yba-cart-savings__amount,
.yba-cart-savings td {
  color: white !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  text-align: right !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  border-radius: 5px !important;
}

/* Cart Club Invitation (PREMIUM + SHIMMER) */
.woocommerce .yba-cart-invitation,
.cart_totals .yba-cart-invitation,
tr.yba-cart-invitation,
.yba-cart-invitation {
  background: transparent !important;
}

.woocommerce .yba-cart-invitation td,
.cart_totals .yba-cart-invitation td,
tr.yba-cart-invitation td,
.yba-cart-invitation td {
  background: linear-gradient(
    90deg,
    #89b864 0%,
    #9dc87a 25%,
    #89b864 50%,
    #9dc87a 75%,
    #89b864 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: yba-shimmer 3s linear infinite !important;
  padding: 20px 16px !important;
  text-align: center !important;
  border-radius: 8px !important;
}

.yba-cart-invitation__content {
  color: white;
}

.yba-cart-invitation__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  color: white;
}

.yba-cart-invitation__savings {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: white;
}

.yba-cart-invitation__cta {
  display: inline-block;
  background: white !important;
  color: #7ab055 !important;
  padding: 10px 24px;
  border-radius: 25px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  transition: var(--yba-transition);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.yba-cart-invitation__cta:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Member Savings Card/Badge (WITH SHIMMER)
   ============================================ */
.yba-savings-card {
  background: linear-gradient(
    90deg,
    #89b864 0%,
    #9dc87a 25%,
    #89b864 50%,
    #9dc87a 75%,
    #89b864 100%
  );
  background-size: 200% 100%;
  animation: yba-shimmer 3s linear infinite,
    yba-pulse-glow 3s ease-in-out infinite;
  border-radius: var(--yba-radius);
  will-change: background-position;
  padding: 18px 22px;
  color: white;
  text-align: center;
  margin: 12px 0;
}

.yba-savings-card__label {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 6px;
}

.yba-savings-card__amount {
  font-size: 28px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.yba-savings-card__badge {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 8px;
}

.yba-savings-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(
    90deg,
    #89b864 0%,
    #9dc87a 25%,
    #89b864 50%,
    #9dc87a 75%,
    #89b864 100%
  );
  background-size: 200% 100%;
  animation: yba-shimmer 3s linear infinite;
  will-change: background-position;
  color: white;
  padding: 8px 16px;
  border-radius: 25px;
  font-weight: 600;
  font-size: 13px;
}

.yba-savings-inline {
  color: var(--yba-primary-dark);
  font-weight: 700;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
  .yba-discount-active {
    padding: 10px 14px;
    flex-direction: column;
    gap: 4px;
  }

  .yba-clube-invitation {
    padding: 12px 14px;
  }

  .yba-clube-invitation__cta {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
  }

  .yba-clube-login__buttons {
    flex-direction: column;
  }

  .yba-clube-login__btn {
    width: 100%;
    text-align: center;
  }

  .yba-cart-invitation__title {
    font-size: 14px;
  }

  .yba-cart-invitation__savings {
    font-size: 16px;
  }

  .yba-savings-card__amount {
    font-size: 24px;
  }
}

/* ============================================
   Animation Preferences
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .yba-discount-active,
  .yba-cart-savings th,
  .yba-cart-savings td,
  .yba-cart-invitation td,
  .yba-savings-card,
  .yba-savings-badge {
    animation: none !important;
    background-size: 100% 100% !important;
  }

  .yba-clube-invitation:hover,
  .yba-clube-invitation__cta:hover,
  .yba-cart-invitation__cta:hover {
    transform: none;
  }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
  .yba-clube-invitation,
  .yba-clube-login,
  .yba-cart-invitation {
    display: none;
  }
}