@charset "UTF-8";
/*!
 * Theme CSS - Main Entry Point
 * This file imports all required CSS files in the correct order
 */

/* 1. Bootstrap 4.6.2 Framework */
@import url("bootstrap.min.css");

/* 3. Modern Clean Override for Bootstrap */
@import url("modern-override.css");

/* 4. Mobile Specific Styles */
@import url("mobile.css");

/*!
 * wxpay
 */

.pw-box-ft {
  padding: 12px 16px;
  background: #07c160;
  color: #fff;
  line-height: 1.5;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
}

.pw-box-ft strong {
  font-weight: 600;
}

/* Mobile modal styles moved to mobile.css for better organization */
/* @media (max-width: 500px) styles are now in mobile.css Section 4 */

/* Mobile VIP Item Styles - Balanced Design */
.mb_vip_item {
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
  margin-bottom: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 1px #e8e8e8;
  position: relative;
  padding: 10px 12px !important;
}

.mb_vip_item.active {
  border-color: #52c41a;
  box-shadow: 0 0 0 1px #52c41a, 0 2px 8px rgba(82, 196, 26, 0.15);
}

.mb_vip_item.active::before {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  color: #52c41a;
  font-weight: bold;
  font-size: 20px;
}

/* Tier-specific backgrounds */
.mb_vip_item.mb_vip_tier_basic {
  background-color: #fff;
}

.mb_vip_item.mb_vip_tier_value {
  background-color: #e6f7ff;
  box-shadow: 0 0 0 1px #91d5ff;
}

.mb_vip_item.mb_vip_tier_popular {
  background-color: #fff7e6;
  box-shadow: 0 0 0 1px #ffd591;
}

.mb_vip_item.mb_vip_tier_best {
  background-color: #f6ffed;
  box-shadow: 0 0 0 1px #b7eb8f;
}

/* Ribbon styles for recommended items - positioned to avoid blocking */
.mb_vip_ribbon {
  position: absolute;
  top: -8px;
  right: 15px;
  background: #fa8c16;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mb_vip_ribbon.ribbon-best {
  background: #52c41a;
}

/* Monthly price display */
.mb_monthly_price {
  color: #52c41a;
  font-size: 0.8rem;
  font-weight: 600;
  display: block;
  margin-top: 2px;
}

/* Savings badge */
.mb_savings_badge {
  background: #ff5a5f;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-block;
  margin-top: 4px;
}

/* Compact mobile payment buttons - only for mobile payment modal */
.mobile-payment-modal .btn-falcon-success,
.mobile-payment-modal .btn-falcon-primary,
.mobile-payment-modal .btn-falcon-info {
  padding: 10px 12px;
  font-size: 0.9rem;
}

@media (max-width: 480px) {
  .mobile-payment-modal .btn span {
    font-size: 1.1rem;
  }
  
  #vip-email {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

#wxpay_qrcode {
  width: 185px;
  height: 185px;
  margin: 10px;
  background-image: url("/assets/img/wx_loading.gif");
  background-size: 75%;
  background-position: center;
  background-repeat: no-repeat;
}

#loading {
  background: url("/assets/img/spinner.gif") no-repeat center center;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9999999;
}

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 10;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 10;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 10;
}

@keyframes flash {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: #fbf8b2;
  }
  100% {
    background-color: transparent;
  }
}

@-webkit-keyframes flash {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: #fbf8b2;
  }
  100% {
    background-color: transparent;
  }
}

@-moz-keyframes flash {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: #fbf8b2;
  }
  100% {
    background-color: transparent;
  }
}

@-ms-keyframes flash {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: #fbf8b2;
  }
  100% {
    background-color: transparent;
  }
}