/* ====================================
   TABLE DES MATIÈRES
   ====================================
   1. Variables et configuration
   2. Section Hero
   3. Section Étapes
   4. Section Avantages
   5. Formulaire de parrainage
   6. Lien de parrainage
   7. Section FAQ
   8. Composants UI
      a. Boutons et liens 
      b. Formulaires
   9. Animations
   10. Cross-Browser Fixes
   11. Responsive Adjustments
   12. Section de parrainage dans le dashboard
   ==================================== */

/* 1. Variables et configuration
   ================================== */
:root {
  --primary-color: #6c5ce7;
  --secondary-color: #fd79a8;
  --dark-bg: #2d3436;
  --light-bg: #f8f9fa;
  --text-dark: #2d3436;
  --text-light: #636e72;
  --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  --hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  --facebook-color: #3b5998;
  --twitter-color: #1da1f2;
  --whatsapp-color: #25d366;
  --transition-standard: all 0.3s ease;
}

/* 2. Section Hero
   ================================== */
#parrainage-hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../../assets/images/ui/sponsorship.avif');
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 120px 0;
  margin-bottom: 40px;
}

#parrainage-hero h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

#parrainage-hero p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
}

/* 3. Section Étapes
   ================================== */
.parrainage-steps {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 40px 0;
}

.step {
  flex: 1;
  min-width: 250px;
  margin: 15px;
  text-align: center;
  padding: 25px;
  border-radius: 10px;
  background-color: var(--light-bg);
  box-shadow: var(--card-shadow);
  transition: var(--transition-standard);
}

.step:hover {
  transform: translateY(-5px);
  box-shadow: var(--hover-shadow);
}

.step-icon {
  background-color: var(--primary-color);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.step-icon i {
  font-size: 28px;
  color: white;
}

.step h3 {
  margin-bottom: 15px;
  color: var(--text-dark);
}

.step p {
  color: var(--text-light);
}

/* 4. Section Avantages
   ================================== */
#parrainage-benefits {
  background-color: #f5f7fa;
  padding: 60px 0;
  margin: 40px 0;
}

.benefits-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.benefit {
  background-color: white;
  border-radius: 10px;
  padding: 30px;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  transition: transform 0.3s ease;
}

.benefit:hover {
  transform: translateY(-5px);
}

.benefit-icon {
  background-color: var(--secondary-color);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.benefit-icon i {
  font-size: 24px;
  color: white;
}

.benefit-content h3 {
  margin-bottom: 10px;
  color: var(--text-dark);
}

.benefit-content p {
  color: var(--text-light);
  margin-bottom: 5px;
}

/* 5. Formulaire de parrainage
   ================================== */
#generate-link {
  padding: 60px 0;
  text-align: center;
}

.registration-form {
  max-width: 500px;
  margin: 0 auto;
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}

.form-group {
  margin-bottom: 20px;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-dark);
}

.form-group input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #dfe6e9;
  border-radius: 5px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-group input:focus {
  border-color: var(--primary-color);
  outline: none;
}

/* 6. Lien de parrainage
   ================================== */
#referral-link-container {
  margin-top: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.referral-link {
  display: flex;
  margin: 20px 0;
}

.referral-link input {
  flex: 1;
  padding: 12px 15px;
  border: 1px solid #dfe6e9;
  border-radius: 5px 0 0 5px;
  font-size: 16px;
  background-color: #f8f9fa;
}

.referral-link button {
  border-radius: 0 5px 5px 0;
  padding: 12px 15px;
}

.share-buttons {
  margin-top: 20px;
}

.share-buttons p {
  margin-bottom: 10px;
}

.hidden {
  display: none;
}

/* 7. Section FAQ
   ================================== */
#parrainage-faq {
  background-color: #fff;
  padding: 60px 0;
}

.faq-container {
  max-width: 800px;
  margin: 30px auto 0;
}

.faq-item {
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.faq-question {
  background-color: #f8f9fa;
  padding: 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  border: none;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background-color: #f0f0f0;
}

.faq-answer {
  display: none;
  padding: 20px;
  background-color: #ffffff;
  border-top: 1px solid #eaeaea;
}

.faq-item.active .faq-answer {
  display: block;
}

/* 8. Composants UI
   ================================== */
/* a. Boutons et liens */
.primary-btn,
.secondary-btn,
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
}

.primary-btn {
  background-color: var(--primary-color);
  color: white;
}

.secondary-btn {
  background-color: var(--secondary-color);
  color: white;
}

.primary-btn:hover,
.secondary-btn:hover,
.share-btn:hover {
  opacity: 0.9;
  text-decoration: none;
  color: white;
  transform: translateY(-2px);
}

.primary-btn i {
  margin-right: 8px;
}

.secondary-btn i {
  margin-right: 5px;
}

.share-btn {
  padding: 10px 15px;
  border-radius: 5px;
  margin: 0 5px 10px;
  cursor: pointer;
  color: white;
  font-size: 14px;
  transition: opacity 0.3s;
  display: inline-flex;
  align-items: center;
}

.share-btn i {
  margin-right: 8px;
}

.share-btn.facebook {
  background-color: var(--facebook-color);
}

.share-btn.twitter {
  background-color: var(--twitter-color);
}

.share-btn.whatsapp {
  background-color: var(--whatsapp-color);
}

/* 9. Animations
   ================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 10. Cross-Browser Fixes
   ================================== */
/* Safari backdrop-filter support */
.modal-content,
.dropdown-menu,
.navbar-blur {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Fix for Firefox min-height: auto issue */
.step,
.benefit,
.any-element-with-min-height-auto {
  min-height: 0; /* Use 0 instead of auto for Firefox compatibility */
}

/* 11. Responsive Adjustments
   ================================== */
@media (max-width: 768px) {
  .parrainage-steps {
    flex-direction: column;
  }
  
  .step, .benefit {
    min-width: 100%;
    margin: 10px 0;
  }
  
  .benefits-container {
    flex-direction: column;
  }
  
  #parrainage-hero {
    padding: 60px 0;
    margin-bottom: 20px;
  }
  
  #parrainage-hero h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }
  
  #parrainage-hero p {
    font-size: 1rem;
  }
  
  .step {
    padding: 20px 15px;
  }
  
  .step-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
  }
  
  .step-icon i {
    font-size: 24px;
  }
  
  .benefit {
    padding: 20px;
  }
  
  .benefit-icon {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  
  .benefit-icon i {
    font-size: 20px;
  }
  
  .registration-form {
    padding: 20px;
  }
  
  .form-group input {
    padding: 10px;
  }
  
  .primary-btn, .secondary-btn {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .referral-link {
    flex-direction: column;
  }
  
  .referral-link input {
    border-radius: 5px;
    margin-bottom: 10px;
  }
  
  .referral-link button {
    border-radius: 5px;
    width: 100%;
  }
  
  .share-buttons button {
    margin: 5px;
    width: calc(50% - 10px);
  }
}

@media (max-width: 480px) {
  #parrainage-hero {
    padding: 40px 0;
  }
  
  #parrainage-hero h2 {
    font-size: 1.5rem;
  }
  
  #parrainage-benefits, 
  #generate-link,
  #parrainage-faq {
    padding: 30px 0;
    margin: 20px 0;
  }
  
  .benefit {
    flex-direction: column;
    text-align: center;
  }
  
  .benefit-icon {
    margin: 0 auto 15px;
  }
  
  .faq-question h3 {
    font-size: 16px;
  }
  
  .faq-item.active .faq-answer {
    max-height: 300px; /* Increased height for more text */
  }
  
  section h2 {
    font-size: 1.6rem;
  }
  
  .share-btn {
    font-size: 13px;
    padding: 8px 12px;
  }
}

/* 12. Section de parrainage dans le dashboard
   ================================== */
.referral-intro {
    background: linear-gradient(to right, #f5f7fa, #c3cfe2);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.referral-hero {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

.referral-hero img {
    max-width: 100px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.referral-text {
    flex: 1;
}

.referral-text h4 {
    margin-top: 0;
    color: #333;
}

.referral-link-card {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

.referral-link-container {
    display: flex;
    margin-bottom: 15px;
}

.referral-link-container input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 6px 0 0 6px;
    padding: 10px 15px;
    font-size: 14px;
}

.referral-link-container button {
    border-radius: 0 6px 6px 0;
}

.sharing-buttons p {
    margin-bottom: 10px;
    font-size: 14px;
    color: #666;
}

.social-share {
    display: flex;
    gap: 10px;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    transition: all 0.2s ease;
}

.share-btn:hover {
    transform: translateY(-2px);
}

.share-btn.facebook {
    background-color: #3b5998;
}

.share-btn.twitter {
    background-color: #1da1f2;
}

.share-btn.whatsapp {
    background-color: #25d366;
}

.share-btn.email {
    background-color: #848484;
}

.referral-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.referral-table {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.data-table th {
    background-color: #f9f9f9;
    font-weight: 600;
    color: #444;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.success {
    background-color: #d4edda;
    color: #155724;
}

.status-badge.pending {
    background-color: #fff3cd;
    color: #856404;
}

.points-cell {
    font-weight: 500;
}

.points-cell.positive {
    color: #28a745;
}

.referral-faq {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Accordéon pour la FAQ */
.accordion-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.accordion-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    cursor: pointer;
}

.accordion-header h5 {
    margin: 0;
    font-weight: 500;
    color: #333;
}

.accordion-content {
    display: none;
    padding: 0 0 15px 0;
}

.accordion-item.active .accordion-content {
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .referral-hero {
        flex-direction: column;
        text-align: center;
    }
    
    .referral-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .referral-link-container {
        flex-direction: column;
    }
    
    .referral-link-container input {
        border-radius: 6px;
        margin-bottom: 10px;
    }
    
    .referral-link-container button {
        width: 100%;
        border-radius: 6px;
    }
}