/* Components CSS File */

/* Navbar Components */
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

/* Card Components */
.feature-card {
  border-bottom: 3px solid var(--primary-color);
}

/* FAQ Accordion */
.accordion-item {
  border: none;
  margin-bottom: 1rem;
  border-radius: var(--border-radius) !important;
  overflow: hidden;
}

.accordion-button {
  background-color: var(--light-color);
  border: none;
  box-shadow: var(--box-shadow);
  font-weight: 600;
  padding: 1.25rem;
}

.accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background-color: var(--light-color);
  box-shadow: var(--box-shadow);
}

.accordion-button:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(153, 69, 255, 0.25);
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239945FF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239945FF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
  padding: 1.5rem;
  background-color: var(--gray-100);
}

/* Input Components */
.form-control {
  border: 2px solid var(--gray-200);
  border-radius: var(--border-radius);
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(153, 69, 255, 0.25);
}

/* Newsletter Component */
.newsletter-form .input-group {
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--box-shadow);
}

.newsletter-form .form-control {
  border: none;
  border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
  padding: 1rem 1.5rem;
}

.newsletter-form .btn {
  border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
  padding: 1rem 2rem;
}

/* Badge Components */
.badge {
  border-radius: var(--border-radius-sm);
  padding: 0.35em 0.65em;
  font-weight: 600;
}

.badge-primary {
  background-color: var(--primary-color);
  color: var(--light-color);
}

.badge-secondary {
  background-color: var(--secondary-color);
  color: var(--dark-color);
}

/* Custom Button Styles */
.btn-primary {
  background-image: linear-gradient(135deg, var(--primary-color), #8035e0);
  border: none;
}

.btn-primary:hover {
  background-image: linear-gradient(135deg, #8035e0, var(--primary-color));
}

/* Alert Components */
.alert {
  border-radius: var(--border-radius);
  padding: 1rem 1.5rem;
  border: none;
  box-shadow: var(--box-shadow);
}

.alert-primary {
  background-color: rgba(153, 69, 255, 0.1);
  color: var(--primary-color);
}

.alert-secondary {
  background-color: rgba(20, 241, 149, 0.1);
  color: #0a8c5c;
}

/* Progress Bars */
.progress {
  background-color: var(--gray-200);
  border-radius: var(--border-radius-sm);
  height: 0.5rem;
  margin-bottom: 1.5rem;
}

.progress-bar {
  background-color: var(--primary-color);
  border-radius: var(--border-radius-sm);
}

/* Card Hover Effects */
.drop-card, .feature-card, .testimonial-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.drop-card:hover, .feature-card:hover, .testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--box-shadow-lg);
}

/* Token Card */
.token-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
  .drop-card, .feature-card, .testimonial-card {
    margin-bottom: 1.5rem;
  }
  
  .btn-connect {
    display: inline-block;
    margin-top: 0.5rem;
    margin-left: 0;
  }
}