@charset "UTF-8";

/* ======================================
   Health Program Manager - Main Styles
   ====================================== */

/* CSS Variables for easy customization */
:root {
  /* Primary Colors */
  --hpm-primary: #4CAF50;
  --hpm-primary-light: #81C784;
  --hpm-primary-dark: #388E3C;
  --hpm-primary-bg: rgba(76, 175, 80, 0.1);

  /* Secondary Colors */
  --hpm-secondary: #2196F3;
  --hpm-secondary-light: #64B5F6;
  --hpm-secondary-dark: #1976D2;

  /* Neutral Colors */
  --hpm-bg-light: #f8f9fa;
  --hpm-bg-medium: #ECE7E1;
  --hpm-bg-dark: #e2dbd1;

  /* Text Colors */
  --hpm-text-primary: #333333;
  --hpm-text-secondary: #666666;
  --hpm-text-light: #999999;

  /* Status Colors */
  --hpm-success: #4CAF50;
  --hpm-warning: #FFC107;
  --hpm-danger: #F44336;
  --hpm-info: #2196F3;

  /* Status Background Colors */
  --hpm-success-bg: #e8f5e9;
  --hpm-warning-bg: #fff8e5;
  --hpm-danger-bg: #ffebee;
  --hpm-info-bg: #e3f2fd;

  /* Border Colors */
  --hpm-border-light: #e5e5e5;
  --hpm-border-medium: #ddd;

  /* Shadow */
  --hpm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --hpm-shadow-md: 0 2px 5px rgba(0, 0, 0, 0.05);
  --hpm-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);

  /* Border Radius */
  --hpm-radius-sm: 4px;
  --hpm-radius-md: 8px;
  --hpm-radius-lg: 12px;
  --hpm-radius-round: 50%;

  /* Spacing */
  --hpm-spacing-xs: 0.5rem;
  --hpm-spacing-sm: 1rem;
  --hpm-spacing-md: 1.5rem;
  --hpm-spacing-lg: 2rem;
  --hpm-spacing-xl: 3rem;

  /* Font Sizes */
  --hpm-font-xs: 12px;
  --hpm-font-sm: 14px;
  --hpm-font-md: 16px;
  --hpm-font-lg: 22px;
  --hpm-font-xl: 26px;
  --hpm-font-xxl: 32px;

  /* Font Weights */
  --hpm-weight-normal: 400;
  --hpm-weight-medium: 500;
  --hpm-weight-semibold: 600;
  --hpm-weight-bold: 700;

  /* Transitions */
  --hpm-transition-fast: 0.2s ease;
  --hpm-transition-normal: 0.3s ease;
}

/* ======================================
   Common Elements & Utilities
   ====================================== */

/* Section Styles */
.hpm-section {
  margin: var(--hpm-spacing-lg) 0;
  padding: var(--hpm-spacing-md);
  background-color: white;
  border-radius: var(--hpm-radius-md);
  box-shadow: var(--hpm-shadow-sm);
  border: 1px solid var(--hpm-border-light);
}

.hpm-section-bg-light {
  background-color: var(--hpm-bg-light);
}

.hpm-section-accent {
  background-color: var(--hpm-primary-bg);
  border-left: 5px solid var(--hpm-primary);
}

/* Card Styles */
.hpm-card,
.bonus-balance-summary,
.pending-bonus-notice,
.hierarchy-display-options,
.empty-downline,
.registration-form,
.registration-success,
.dashboard-card,
.referral-card .referral-code,
.progress-container,
.referral-stats,
.health-program-statistics,
.health-program-registration,
.ref-code-block,
.hpm-available-bonus-container {
  background-color: white;
  border-radius: var(--hpm-radius-md);
  box-shadow: var(--hpm-shadow-sm);
  padding: var(--hpm-spacing-md);
  margin-bottom: var(--hpm-spacing-md);
  border: 1px solid var(--hpm-border-light);
}

/* Common heading styles */
.hpm-section-title {
  margin-top: 0;
  margin-bottom: var(--hpm-spacing-md);
  color: var(--hpm-text-primary);
  font-weight: var(--hpm-weight-semibold);
  padding-bottom: var(--hpm-spacing-sm);
  border-bottom: 1px solid var(--hpm-border-light);
}

.hpm-section-title-sm {
  font-size: var(--hpm-font-lg);
}

.hpm-section-title-lg {
  font-size: var(--hpm-font-xl);
}

/* Apply to existing elements */
.hpm-card-header,
.bonus-balance-section h3,
.referral-stats h3,
.dashboard-card h3,
.registration-form h3 {
  margin-top: 0;
  margin-bottom: var(--hpm-spacing-md);
  color: var(--hpm-text-primary);
  font-weight: var(--hpm-weight-semibold);
  padding-bottom: var(--hpm-spacing-sm);
  border-bottom: 1px solid var(--hpm-border-light);
  font-size: var(--hpm-font-lg);
}

.health-program-statistics h2,
.registration-header h2,
.dashboard-header h2,
.bonus-transactions-page h2,
.referral-stats h2,
.bonus-balance-section h2,
.life-tree-bonus-section h2 {
  margin-top: 0;
  margin-bottom: var(--hpm-spacing-md);
  color: var(--hpm-text-primary);
  font-weight: var(--hpm-weight-semibold);
  padding-bottom: var(--hpm-spacing-sm);
  border-bottom: 1px solid var(--hpm-border-light);
  font-size: var(--hpm-font-xl);
}

.hpm-card-content {
  margin-bottom: var(--hpm-spacing-sm);
}

.hpm-section-header {
  margin-top: 0;
  margin-bottom: var(--hpm-spacing-md);
  color: var(--hpm-text-primary);
  font-size: var(--hpm-font-xl);
  font-weight: var(--hpm-weight-semibold);
}

/* Status Indicators */
.hpm-status,
.member-status,
.tree-node-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--hpm-radius-sm);
  font-size: var(--hpm-font-sm);
  font-weight: var(--hpm-weight-medium);
}

.hpm-status-success,
.member-status:not(.inactive),
.tree-node-status:not(.inactive) {
  background-color: var(--hpm-success-bg);
  color: var(--hpm-success);
}

.hpm-status-warning {
  background-color: var(--hpm-warning-bg);
  color: var(--hpm-warning);
}

.hpm-status-danger,
.member-status.inactive,
.tree-node-status.inactive {
  background-color: var(--hpm-danger-bg);
  color: var(--hpm-danger);
}

.hpm-status-info {
  background-color: var(--hpm-info-bg);
  color: var(--hpm-info);
}

/* Notification Styles */
.hpm-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: var(--hpm-spacing-sm) var(--hpm-spacing-md);
  background-color: var(--hpm-primary);
  color: white;
  border-radius: var(--hpm-radius-sm);
  box-shadow: var(--hpm-shadow-lg);
  z-index: 10000;
  display: none;
  font-weight: var(--hpm-weight-medium);
  animation: fadeInOut 3s ease;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  10% {
    opacity: 1;
    transform: translateY(0);
  }

  90% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Loading Overlay */
.hpm-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  display: none;
}

.hpm-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--hpm-border-light);
  border-top: 4px solid var(--hpm-primary);
  border-radius: var(--hpm-radius-round);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ======================================
   User Profile & Referral Code
   ====================================== */

.ref-code-block {
  margin-top: 0;
}

.ref-code-block p {
  margin: var(--hpm-spacing-xs) 0;
  color: var(--hpm-text-primary);
  line-height: 1.5;
}

.ref-code-block p span {
  font-weight: var(--hpm-weight-semibold);
}

#ref-code-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--hpm-spacing-xs) var(--hpm-spacing-sm);
  background-color: var(--hpm-primary-bg);
  border-radius: var(--hpm-radius-sm);
  color: var(--hpm-primary);
  text-decoration: none;
  transition: background-color var(--hpm-transition-fast);
}

#ref-code-copy:hover {
  background-color: rgba(76, 175, 80, 0.2);
}

#ref-code {
  font-weight: var(--hpm-weight-medium);
}

/* ======================================
   Bonus Balance & Transactions
   ====================================== */

.bonus-balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--hpm-spacing-md);
  margin-bottom: var(--hpm-spacing-sm);
}

.bonus-amount-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  /* Changed to white for contrast with accent section */
  border-radius: var(--hpm-radius-md);
  padding: var(--hpm-spacing-md) var(--hpm-spacing-lg);
  box-shadow: var(--hpm-shadow-sm);
  width: 100%;
  transition: transform var(--hpm-transition-fast);
  border: 1px solid var(--hpm-border-light);
  /* Added border */
}

.bonus-amount-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: var(--hpm-shadow-md);
}

.amount-label {
  font-size: var(--hpm-font-md);
  color: var(--hpm-text-secondary);
  margin-bottom: var(--hpm-spacing-xs);
  font-weight: var(--hpm-weight-medium);
  text-align: center;
  /* Center align label */
}

.bonus-amount-wrapper .amount {
  font-size: var(--hpm-font-xxl);
  font-weight: var(--hpm-weight-bold);
  color: var(--hpm-primary);
  /* Default primary color */
}

.bonus-amount-wrapper.main-bonus .amount {
  color: var(--hpm-primary-dark);
  /* Darker green for main bonus */
}

.bonus-amount-wrapper.temporary-bonus .amount {
  color: var(--hpm-secondary-dark);
  /* Darker blue for temporary bonus */
}

.monthly-bonus-status {
  /* margin-top: var(--hpm-spacing-md);
  padding: var(--hpm-spacing-sm);
  background-color: white;
  border-radius: var(--hpm-radius-md);
  box-shadow: var(--hpm-shadow-sm);
  border: 1px solid var(--hpm-border-light); */
}

.monthly-bonus-status p {
  margin: var(--hpm-spacing-xs) 0;
  color: var(--hpm-text-primary);
  font-size: var(--hpm-font-md);
  line-height: 1.6;
}

.monthly-bonus-status p strong {
  font-weight: var(--hpm-weight-bold);
  color: var(--hpm-primary);
}

.monthly-bonus-status .success-message {
  color: var(--hpm-success);
  font-weight: var(--hpm-weight-semibold);
  background-color: var(--hpm-success-bg);
  padding: var(--hpm-spacing-sm);
  border-radius: var(--hpm-radius-sm);
  border-left: 4px solid var(--hpm-success);
}

.monthly-bonus-status .warning-message {
  color: var(--hpm-warning);
  font-weight: var(--hpm-weight-semibold);
  background-color: var(--hpm-warning-bg);
  padding: var(--hpm-spacing-sm);
  border-radius: var(--hpm-radius-sm);
  border-left: 4px solid var(--hpm-warning);
}

.pending-bonus-notice {
  border-left: 4px solid var(--hpm-warning);
  margin: var(--hpm-spacing-md) 0;
}

.pending-bonus-notice p {
  margin: 0;
  color: var(--hpm-text-secondary);
  font-size: var(--hpm-font-sm);
  line-height: 1.5;
}

.bonus-balance-summary p {
  margin: 0;
  font-size: var(--hpm-font-md);
  color: var(--hpm-text-primary);
  display: flex;
  align-items: center;
  gap: var(--hpm-spacing-sm);
}

.bonus-balance-summary p strong {
  color: var(--hpm-primary);
  font-weight: var(--hpm-weight-semibold);
  font-size: var(--hpm-font-lg);
}

.bonus-balance {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--hpm-spacing-md);
}

/* Transactions Table */
.bonus-transactions-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  border-radius: var(--hpm-radius-md);
  overflow: hidden;
  box-shadow: var(--hpm-shadow-sm);
  margin: 0;
}

.bonus-transactions-table th,
.bonus-transactions-table td {
  padding: var(--hpm-spacing-sm);
  text-align: left;
  border-bottom: 1px solid var(--hpm-border-light);
}

.bonus-transactions-table th {
  background-color: var(--hpm-bg-light);
  font-weight: var(--hpm-weight-semibold);
  color: var(--hpm-text-primary);
  text-transform: uppercase;
  font-size: var(--hpm-font-sm);
}

.bonus-transactions-table tr:hover {
  background-color: var(--hpm-bg-light);
}

.bonus-transactions-table td.positive {
  color: var(--hpm-success);
  font-weight: var(--hpm-weight-semibold);
}

.bonus-transactions-table td.negative {
  color: var(--hpm-danger);
  font-weight: var(--hpm-weight-semibold);
}

.view-all-transactions {
  text-align: right;
  margin-top: var(--hpm-spacing-sm);
}

.view-all-transactions a {
  display: inline-flex;
  align-items: center;
  gap: var(--hpm-spacing-xs);
  padding: var(--hpm-spacing-xs) var(--hpm-spacing-sm);
  background-color: var(--hpm-primary-bg);
  border-radius: var(--hpm-radius-sm);
  color: var(--hpm-primary);
  text-decoration: none;
  font-weight: var(--hpm-weight-medium);
  transition: background-color var(--hpm-transition-fast);
}

.view-all-transactions a:hover {
  background-color: rgba(76, 175, 80, 0.2);
}

.view-all-transactions a::after {
  content: "→";
  font-size: var(--hpm-font-md);
}

/* ======================================
   Health Program Statistics
   ====================================== */

.health-program-registration {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--hpm-spacing-sm);
  padding: var(--hpm-spacing-lg);
  margin: 0;
  box-shadow: var(--hpm-shadow-md);
}

.health-program-registration p {
  font-size: var(--hpm-font-lg);
  text-align: center;
  color: var(--hpm-text-primary);
  margin: 0;
}

.health-program-registration .button,
.registration-success .dashboard-link,
.empty-downline .referral-link,
.form-actions .submit-button {
  display: inline-block;
  padding: var(--hpm-spacing-sm) var(--hpm-spacing-md);
  background-color: var(--hpm-primary);
  color: white;
  border: none;
  border-radius: var(--hpm-radius-sm);
  text-decoration: none;
  font-weight: var(--hpm-weight-medium);
  cursor: pointer;
  transition: background-color var(--hpm-transition-fast);
}

.health-program-registration .button:hover,
.registration-success .dashboard-link:hover,
.empty-downline .referral-link:hover,
.form-actions .submit-button:hover {
  background-color: var(--hpm-primary-dark);
}

.statistics-grid,
.referral-grid,
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--hpm-spacing-md);
  margin-top: var(--hpm-spacing-md);
}

.statistics-grid .statistic,
.referral-grid .referral-stat,
.referral-card .referral-stat,
.tree-node-content {
  padding: var(--hpm-spacing-md);
  background-color: var(--hpm-bg-light);
  border-radius: var(--hpm-radius-md);
  box-shadow: var(--hpm-shadow-sm);
  transition: transform var(--hpm-transition-fast);
}

.statistics-grid .statistic:hover,
.referral-grid .referral-stat:hover,
.referral-card .referral-stat:hover,
.tree-node-content:hover,
.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--hpm-shadow-md);
}

.statistics-grid .statistic .label,
.referral-grid .referral-stat .label,
.referral-card .referral-stat .label {
  display: block;
  font-size: var(--hpm-font-sm);
  color: var(--hpm-text-secondary);
  margin-bottom: var(--hpm-spacing-xs);
  font-weight: var(--hpm-weight-medium);
}

.statistics-grid .statistic .value,
.referral-grid .referral-stat .value,
.referral-card .referral-stat .value {
  display: block;
  font-size: var(--hpm-font-lg);
  font-weight: var(--hpm-weight-bold);
  color: var(--hpm-text-primary);
}

/* Progress Bar */

.hpm-progress-container {
    margin-top: 20px;
}
.hpm-progress-container .progress-bar {
  background-color: #d7d7d7 !important;
}

.hpm-progress-container .progress-labels,
.progress-card .progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--hpm-font-sm);
  color: var(--hpm-text-secondary);
  margin-bottom: var(--hpm-spacing-xs);
}

.hpm-progress-container .progress-bar,
.progress-card .progress-bar {
  height: 10px;
  background-color: var(--hpm-bg-light);
  border-radius: var(--hpm-radius-sm);
  overflow: hidden;
  position: relative;
}

.hpm-progress-container .progress-bar .progress,
.progress-container .progress-bar .progress {
  height: 100%;
  background-color: var(--hpm-primary);
  transition: width var(--hpm-transition-normal);
}

.progress-card .progress-bar .progress {
  height: 100%;
  background-color: var(--hpm-secondary);
  transition: width var(--hpm-transition-normal);
}

/* Current Month Status */
.current-month-status {
  padding: var(--hpm-spacing-md);
  border-radius: var(--hpm-radius-md);
  background-color: var(--hpm-bg-light);
  text-align: center;
  position: relative;
  border: 2px solid transparent;
  box-shadow: var(--hpm-shadow-sm);
}

.current-month-status .value {
  text-transform: capitalize;
  font-size: var(--hpm-font-xl) !important;
  color: var(--hpm-text-primary);
  font-weight: var(--hpm-weight-bold);
  margin-bottom: var(--hpm-spacing-xs);
}

.current-month-status.achieved {
  background-color: var(--hpm-success-bg);
  border-color: var(--hpm-success);
}

.current-month-status.achieved .status-indicator {
  color: var(--hpm-success);
}

.current-month-status .status-indicator {
  margin-top: var(--hpm-spacing-xs);
  font-size: var(--hpm-font-md);
  font-weight: var(--hpm-weight-semibold);
  color: var(--hpm-danger);
}

/* Discount Levels */
.hpm-discount-levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--hpm-spacing-md);
  margin-top: var(--hpm-spacing-md);
}

.hpm-discount-levels-grid .discount-level {
  padding: var(--hpm-spacing-md);
  border-radius: var(--hpm-radius-md);
  background-color: var(--hpm-bg-light);
  text-align: center;
  position: relative;
  border: 2px solid transparent;
  transition: transform var(--hpm-transition-fast);
}

.hpm-discount-levels-grid .discount-level:hover {
  transform: translateY(-2px);
}

.hpm-discount-levels-grid .discount-level.achieved,
.hpm-discount-levels-grid .discount-level.current {
  background-color: var(--hpm-success-bg);
  border-color: var(--hpm-success);
}

.hpm-discount-levels-grid .discount-level.achieved::after {
  content: "✓";
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: var(--hpm-success);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: var(--hpm-radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--hpm-font-md);
  box-shadow: var(--hpm-shadow-sm);
}

.hpm-discount-levels-grid .discount-level .level-number {
  font-size: var(--hpm-font-md);
  font-weight: var(--hpm-weight-semibold);
  color: var(--hpm-text-secondary);
  margin-bottom: var(--hpm-spacing-xs);
}

.hpm-discount-levels-grid .discount-level .level-discount {
  font-size: var(--hpm-font-xl);
  font-weight: var(--hpm-weight-bold);
  color: var(--hpm-text-primary);
}

/* ======================================
   Bonus Usage
   ====================================== */

#use_bonus_balance_field {
  margin: var(--hpm-spacing-md) 0;
  padding: var(--hpm-spacing-md);
  background-color: var(--hpm-bg-light);
  border-radius: var(--hpm-radius-md);
  box-shadow: var(--hpm-shadow-sm);
}

#use_bonus_balance_field label {
  display: flex;
  align-items: center;
  gap: var(--hpm-spacing-xs);
  font-size: var(--hpm-font-md);
  color: var(--hpm-text-primary);
  font-weight: var(--hpm-weight-medium);
}

#use_bonus_balance_field input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
  border-color: var(--hpm-primary);
}

.hpm-available-bonus {
  display: flex;
  align-items: center;
  gap: var(--hpm-spacing-md);
}

.bonus-icon {
  font-size: var(--hpm-font-xxl);
  color: var(--hpm-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background-color: var(--hpm-primary-bg);
  border-radius: var(--hpm-radius-round);
  flex-shrink: 0;
}

.bonus-details {
  flex-grow: 1;
}

.bonus-details h3 {
  margin-top: 0;
  margin-bottom: var(--hpm-spacing-xs);
  font-size: var(--hpm-font-lg);
  color: var(--hpm-text-primary);
  font-weight: var(--hpm-weight-semibold);
}

.bonus-details p {
  margin: var(--hpm-spacing-xs) 0;
  color: var(--hpm-text-secondary);
}

.bonus-details .amount {
  font-weight: var(--hpm-weight-semibold);
  color: var(--hpm-primary);
}

.bonus-info {
  font-size: var(--hpm-font-sm);
  font-style: italic;
  margin-top: var(--hpm-spacing-xs) !important;
  color: var(--hpm-text-light);
}

.hpm-bonus-usage th,
.hpm-bonus-usage td {
  padding-top: var(--hpm-spacing-md) !important;
  border-top: 1px solid var(--hpm-border-light) !important;
}

.bonus-usage-container {
  display: flex;
  flex-direction: column;
  gap: var(--hpm-spacing-xs);
}

.bonus-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--hpm-spacing-xs);
  cursor: pointer;
}

.bonus-checkbox-text {
  font-weight: var(--hpm-weight-semibold);
  color: var(--hpm-primary);
}

/* ======================================
   Downline Hierarchy Styles
   ====================================== */

.downline-list {
  margin-top: var(--hpm-spacing-md);
}

.downline-hierarchy {
  list-style: none;
  padding: 0;
  margin: 0;
}

.downline-hierarchy li {
  margin-bottom: var(--hpm-spacing-sm);
}

.downline-hierarchy .member-level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--hpm-spacing-sm);
  background-color: var(--hpm-bg-light);
  border-radius: var(--hpm-radius-md);
  border-left: 3px solid var(--hpm-primary);
  box-shadow: var(--hpm-shadow-sm);
  transition: all var(--hpm-transition-fast);
}

.downline-hierarchy .member-level:hover {
  background-color: var(--hpm-primary-bg);
  transform: translateX(3px);
}

.downline-hierarchy .member-name {
  font-weight: var(--hpm-weight-medium);
  color: var(--hpm-text-primary);
}

.downline-hierarchy .member-name i {
  margin-right: 2px;
}

.downline-hierarchy .toggle-downline {
  background: none;
  border: none;
  color: var(--hpm-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--hpm-radius-round);
  background-color: white;
  box-shadow: var(--hpm-shadow-sm);
  transition: all var(--hpm-transition-fast);
}

.downline-hierarchy .toggle-downline:hover {
  background-color: var(--hpm-primary-bg);
  color: var(--hpm-primary);
}

.downline-hierarchy .toggle-downline i {
  transition: transform var(--hpm-transition-fast);
}

.downline-hierarchy .toggle-downline.active i {
  transform: rotate(90deg);
}

.downline-hierarchy .nested-level {
  padding-left: var(--hpm-spacing-md);
  margin-top: var(--hpm-spacing-xs);
  display: none;
}

.downline-hierarchy .nested-level.visible {
  display: block;
  animation: fadeIn var(--hpm-transition-fast);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Level-specific styling */
.downline-hierarchy .level-0 {
  border-left-color: var(--hpm-primary);
}

.downline-hierarchy .level-1 {
  border-left-color: var(--hpm-secondary);
}

.downline-hierarchy .level-2 {
  border-left-color: var(--hpm-warning);
}

.downline-hierarchy .level-3 {
  border-left-color: var(--hpm-info);
}

.downline-hierarchy .level-4 {
  border-left-color: var(--hpm-danger);
}

/* Nested levels indentation */
.downline-hierarchy .nested-level .downline-hierarchy {
  margin-left: var(--hpm-spacing-sm);
  border-left: 1px dashed var(--hpm-border-medium);
  padding-left: var(--hpm-spacing-sm);
}

/* ======================================
   Loyalty Bonus Styles
   ====================================== */

.loyalty-bonus-section {
  margin-top: var(--hpm-spacing-md);
  margin-bottom: var(--hpm-spacing-md);
  padding: var(--hpm-spacing-md);
  background-color: var(--hpm-bg-light);
  border-radius: var(--hpm-radius-md);
  box-shadow: var(--hpm-shadow-sm);
  border: 1px solid var(--hpm-border-light);
}

.loyalty-bonus-info {
  margin-bottom: var(--hpm-spacing-md);
}

.loyalty-bonus-info p {
  margin: 0;
  color: var(--hpm-text-primary);
  font-size: var(--hpm-font-md);
  line-height: 1.5;
}

.loyalty-progress-container {
  margin: var(--hpm-spacing-md) 0;
}

.loyalty-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--hpm-spacing-xs);
}

.loyalty-progress-label {
  font-size: var(--hpm-font-sm);
  color: var(--hpm-text-secondary);
  font-weight: var(--hpm-weight-medium);
}

.loyalty-progress-value {
  font-size: var(--hpm-font-sm);
  color: var(--hpm-primary);
  font-weight: var(--hpm-weight-semibold);
}

.loyalty-progress-bar {
  height: 10px;
  background-color: var(--hpm-bg-medium);
  border-radius: var(--hpm-radius-sm);
  overflow: hidden;
  position: relative;
  margin-bottom: var(--hpm-spacing-xs);
}

.loyalty-progress {
  height: 100%;
  background-color: var(--hpm-primary);
  transition: width var(--hpm-transition-normal);
}

.loyalty-progress-milestones {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--hpm-spacing-xs);
}

.loyalty-milestone {
  width: 20px;
  height: 20px;
  border-radius: var(--hpm-radius-round);
  background-color: var(--hpm-bg-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--hpm-font-xs);
  color: var(--hpm-text-secondary);
  font-weight: var(--hpm-weight-semibold);
  position: relative;
}

.loyalty-milestone.completed {
  background-color: var(--hpm-primary);
  color: white;
}

.loyalty-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--hpm-font-xs);
  color: var(--hpm-text-secondary);
}

.loyalty-remaining-info {
  margin-top: var(--hpm-spacing-md);
  padding: var(--hpm-spacing-sm);
  background-color: var(--hpm-primary-bg);
  border-radius: var(--hpm-radius-sm);
  border-left: 3px solid var(--hpm-primary);
}

.loyalty-remaining-info p {
  margin: 0;
  color: var(--hpm-primary-dark);
  font-size: var(--hpm-font-sm);
  font-weight: var(--hpm-weight-medium);
  line-height: 1.5;
}

/* ======================================
   Responsive Styles
   ====================================== */

@media (max-width: 768px) {

  .hpm-available-bonus,
  .bonus-balance-summary p {
    flex-direction: column;
    text-align: center;
    align-items: flex-start;
  }

  .bonus-icon {
    margin: auto;
  }

  .bonus-transactions-table,
  .referral-card .referral-code {
    display: block;
    overflow-x: auto;
    flex-direction: column;
  }

  .bonus-transactions-table th,
  .bonus-transactions-table td {
    white-space: nowrap;
  }

  .hierarchy-display-options,
  .form-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hpm-spacing-sm);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-actions .back-button,
  .form-actions .submit-button,
  .referral-card .copy-button {
    width: 100%;
  }

  /* Responsive downline hierarchy */
  .downline-hierarchy .member-level {
    flex-wrap: wrap;
  }

  .downline-hierarchy .nested-level {
    padding-left: var(--hpm-spacing-sm);
  }
}

@media (max-width: 600px) {

  .statistics-grid,
  .hpm-discount-levels-grid,
  .referral-grid,
  .dashboard-grid,
  .bonus-balance-grid {
    /* Added for responsiveness */
    grid-template-columns: 1fr;
  }

  .downline-hierarchy.horizontal {
    flex-direction: column;
  }

  .downline-hierarchy.horizontal li {
    width: 100%;
  }

  .bonus-balance-section h3,
  .bonus-balance-section h4,
  .health-program-statistics h2,
  .referral-stats h3,
  .dashboard-header h2,
  .dashboard-header p,
  .registration-header h2,
  .registration-header p,
  .dashboard-card h3,
  .bonus-transactions-page h2,
  .registration-success h3,
  .registration-success p,
  .hpm-section-title {
    text-align: center;
  }

  .bonus-amount-wrapper {
    max-width: 100%;
  }

  .bonus-amount-wrapper .amount-label {
    /* Ensure label is centered on small screens */
    text-align: center;
  }
}

/* ======================================
   Klub Életfa Bónusz Styles
   ====================================== */



.life-tree-visualization {
  text-align: center;
  margin-bottom: var(--hpm-spacing-lg);
}

.life-tree-visualization .hpm-section-title-md {
  margin-bottom: var(--hpm-spacing-md);
}

.life-tree-visualization-svg-container {
  max-width: 400px;
  /* Max width for the SVG container */
  margin: 0 auto var(--hpm-spacing-sm) auto;
  position: relative;
  width: 100%;
  /* Ensure it takes full width of its parent */
  overflow: hidden;
  /* Hide anything outside the circle */
  border-radius: var(--hpm-radius-round);
  /* Make the container circular */
  background-color: var(--hpm-bg-medium);
  /* Base color for the trunk */
  box-shadow: var(--hpm-shadow-md);
  /* Subtle shadow for depth */
  border: 2px solid var(--hpm-border-medium);
  /* Outer border of the trunk */
  aspect-ratio: 1 / 1;
  /* Maintain a square aspect ratio */
}

.life-tree-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* More organic, subtle wood-like texture */
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJub2lzZSI+CiAgICA8ZmVUcmFuc2Zvcm0gdHlwZT0ic2NhbGUiIHg9IjAuNSIgeT0iMC41Ii8+CiAgICA8ZmVUcmFuc2Zvcm0gdHlwZT0idHJhbnNsYXRlIiB4PSIyNSIgeT0iMjUiLz4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjEgMC41IiBudW1OctGF2ZXM9IjMiIHNlZWQ9IjAiIHN0aXRjaFRpbGVzPSJub1N0aXRjaCIgcmVzdWx0PSJmdXJ0eU5vaXNlIi8+CiAgICA8ZmVDb2xvck1hdHJpeCBpbj0iZnVydHlOb2lzZSIgdHlwZT0ibHVtaW5hbmNlVG9hbHBoYSIgb3V0cHV0PSJhbHBoYSIvPgogICAgPGZlQ29tcG9zaXRlIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImFscGhhIiBvcGVyYXRvcj0iaW4iIHJlc3VsdD0iY29tcG9zaXRlIi8+CiAgPC9maWx0ZXI+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2U4ZDNjNyIgZmlsdGVyPSJ1cmwoI25vaXNlKSIvPgo8L3N2Z2c+');
  background-size: cover;
  background-position: center;
  border-radius: var(--hpm-radius-round);
  /* Ensure SVG itself is circular */
  /* Add a subtle inner shadow for depth, mimicking wood layers */
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
}

.life-tree-ring {
  fill: none;
  stroke: #5C4033;
  /* Darker, earthy brown for rings */
  stroke-width: 2.5;
  /* Slightly thicker for more presence */
  transition: stroke-width var(--hpm-transition-fast);
  stroke-dasharray: none;
  /* Ensure solid lines by default */
}

.life-tree-ring.inner-ring {
  stroke-width: 4;
  /* Thicker inner ring */
  stroke: #4A3228;
  /* Even darker for the core */
}

.life-tree-ring.outer-ring {
  stroke-width: 4;
  /* Thicker outer ring */
  stroke: #4A3228;
  /* Even darker for the outer edge */
}

.life-tree-segment {
  fill: rgba(255, 255, 255, 0.3);
  /* Slightly transparent white for a subtle overlay on wood texture */
  stroke: #5C4033;
  /* Darker, earthy brown for segments */
  stroke-width: 1.5;
  /* Slightly thicker for more definition */
  transition: fill var(--hpm-transition-normal), transform var(--hpm-transition-fast);
  transform-origin: center center;
  /* For hover scaling */
  cursor: pointer;
  /* Add a subtle, irregular dash to mimic drawn lines */
  stroke-dasharray: 1 0.5;
  /* Short dash, short gap */
  stroke-linecap: round;
  /* Round the ends of the dashes */
}

.life-tree-segment:hover {
  fill: var(--hpm-primary-light);
  /* Lighter primary on hover */
  transform: scale(1.02);
  /* Slight scale effect */
}

.life-tree-segment.filled {
  fill: var(--hpm-primary);
  /* Primary color for filled segments */
  stroke: var(--hpm-primary-dark);
  /* Darker primary for filled segment border */
  /* Remove box-shadow here as it's on the main SVG container now */
  /* Add a subtle inner shadow for depth, mimicking wood layers */
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}

.life-tree-segment-number {
  font-family: 'Georgia', serif;
  /* More classic, drawn font */
  font-size: var(--hpm-font-md);
  font-weight: var(--hpm-weight-bold);
  fill: #333;
  /* Darker fill for numbers */
  pointer-events: none;
  /* Allow clicks to pass through to segment */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  /* Subtle text shadow for depth */
}

.life-tree-segment-number.filled {
  fill: white;
  /* White color for numbers in filled segments */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  /* Stronger shadow for filled numbers */
}

.life-tree-center-tag-bg {
  fill: var(--hpm-primary-light);
  /* Background for the central tag */
  stroke: var(--hpm-primary);
  stroke-width: 2;
  /* Add a subtle inner shadow for depth */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.life-tree-center-tag-text {
  font-family: 'Georgia', serif;
  /* More classic, drawn font */
  font-size: var(--hpm-font-md);
  font-weight: var(--hpm-weight-bold);
  fill: white;
  /* White text for the tag */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  /* Subtle text shadow */
}

/* Responsive adjustments for Life Tree */
@media (max-width: 600px) {
  .life-tree-visualization-svg-container {
    max-width: 300px;
    /* Adjust max-width for smaller screens */
  }

  .life-tree-segment-number {
    font-size: var(--hpm-font-sm);
    /* Smaller font for numbers */
  }

  .life-tree-center-tag-text {
    font-size: var(--hpm-font-sm);
    /* Smaller font for center tag */
  }
}


.fields-filled-text {
  font-size: var(--hpm-font-md);
  font-weight: var(--hpm-weight-medium);
  color: var(--hpm-text-primary);
  margin-top: var(--hpm-spacing-sm);
}

.life-tree-complete {
  font-size: var(--hpm-font-lg);
  font-weight: var(--hpm-weight-bold);
  color: var(--hpm-success);
  margin-top: var(--hpm-spacing-sm);
}

.life-tree-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--hpm-spacing-lg);
}

.life-tree-progress .hpm-section-title-md {
  grid-column: 1 / -1;
  /* Span across all columns */
  text-align: center;
  margin-bottom: 0;
}

.progress-item {
  padding: var(--hpm-spacing-md);
  background-color: var(--hpm-bg-light);
  border-radius: var(--hpm-radius-md);
  box-shadow: var(--hpm-shadow-sm);
}

.progress-item h4 {
  margin-top: 0;
  margin-bottom: var(--hpm-spacing-sm);
  font-size: var(--hpm-font-md);
  font-weight: var(--hpm-weight-semibold);
  color: var(--hpm-text-primary);
}

.progress-item p {
  margin-top: 0;
  margin-bottom: var(--hpm-spacing-sm);
  color: var(--hpm-text-secondary);
  font-size: var(--hpm-font-sm);
}

.progress-item p strong {
  color: var(--hpm-primary);
  font-weight: var(--hpm-weight-bold);
}

/* Smaller progress bar */
.hpm-progress-container.small .progress-bar {
  height: 8px;
}

.hpm-progress-container.small .progress-labels.small {
  font-size: var(--hpm-font-xs);
}

.referral-icons {
  display: flex;
  gap: var(--hpm-spacing-xs);
  margin-bottom: var(--hpm-spacing-xs);
  color: var(--hpm-text-light);
  font-size: var(--hpm-font-lg);
  /* Adjust icon size */
}

.referral-icons i.filled {
  color: var(--hpm-primary);
}

.referral-count-text {
  font-size: var(--hpm-font-sm);
  color: var(--hpm-text-secondary);
  font-weight: var(--hpm-weight-medium);
  margin-bottom: 0 !important;
}

/* Responsive adjustments for Life Tree */

/* ======================================
   Pending Referrals Styles
   ====================================== */

.pending-referrals-list {
  margin: var(--hpm-spacing-lg) auto 0;
  text-align: center;
}

.pending-referrals-list ul {
  list-style: none;
  padding: 0;
  margin: var(--hpm-spacing-md) 0;
}

.pending-referrals-list li {
  display: flex;
  align-items: center;
  gap: var(--hpm-spacing-sm);
  padding: var(--hpm-spacing-sm);
  background-color: var(--hpm-warning-bg);
  border: 1px solid var(--hpm-warning);
  border-radius: var(--hpm-radius-sm);
  color: var(--hpm-warning-dark);
  font-size: var(--hpm-font-md);
  margin-bottom: var(--hpm-spacing-xs);
}

.pending-referrals-list li i {
  color: var(--hpm-warning);
}

.pending-referrals-list .description {
  font-size: var(--hpm-font-sm);
  color: var(--hpm-text-secondary);
  margin-top: var(--hpm-spacing-sm);
  font-style: italic;
}