/* ============================================
   Awelewa Custom Styles - Lime/Purple Theme
   Primary: #E4FF97 | Secondary: #573cfa
   ============================================ */

/* ============================================
   COLOR SCHEME & ACCESSIBILITY
   ============================================ */

/* Primary color text - Use dark variant for readability */
.text-primary, a.text-primary {
  color: #5a7a00 !important;
}

/* Primary buttons - Dark text on light background */
.btn-primary {
  background: linear-gradient(135deg, #E4FF97 0%, #d4f070 100%) !important;
  border: none !important;
  color: #2d3b00 !important;
  box-shadow: 0 4px 15px rgba(228, 255, 151, 0.4);
  font-weight: 600 !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #d4f070 0%, #E4FF97 100%) !important;
  box-shadow: 0 6px 20px rgba(228, 255, 151, 0.5);
  transform: translateY(-2px);
  color: #1a2400 !important;
}

/* Secondary buttons */
.btn-secondary {
  background: linear-gradient(135deg, #573cfa 0%, #7b5cff 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(87, 60, 250, 0.3);
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #4630d9 0%, #573cfa 100%) !important;
  transform: translateY(-2px);
  color: #ffffff !important;
}

/* Outline primary button */
.btn-outline-primary {
  border: 2px solid #E4FF97 !important;
  color: #5a7a00 !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background: #E4FF97 !important;
  color: #2d3b00 !important;
}

/* ============================================
   SOFT SHADOWS WITH PURPLE TINT
   ============================================ */

.card, .expert-container, .category-card, .product-card, .service-card {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(87, 60, 250, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.card:hover, .expert-container:hover, .category-card:hover, .product-card:hover, .service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(87, 60, 250, 0.15);
}

/* Expert Cards */
.expert-card, .slick-item .expert-container {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(87, 60, 250, 0.08);
}

.expert-card img, .expert-container img {
  border-radius: 12px;
  transition: transform 0.4s ease;
}

.expert-card:hover img, .expert-container:hover img {
  transform: scale(1.05);
}

/* Product Cards */
.product-card {
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(87, 60, 250, 0.08);
  box-shadow: 0 4px 15px rgba(87, 60, 250, 0.06);
}

.product-card:hover {
  border-color: #E4FF97;
  box-shadow: 0 8px 25px rgba(87, 60, 250, 0.12);
}

/* Testimonial Cards */
.testimonial-card {
  border-radius: 16px;
  padding: 24px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(87, 60, 250, 0.08);
}

/* ============================================
   GRADIENT BACKGROUNDS
   ============================================ */

.bg-primary, .bg-gradient-primary {
  background: linear-gradient(135deg, #E4FF97 0%, #d4f070 100%) !important;
  color: #2d3b00 !important;
}

.bg-secondary, .bg-gradient-secondary {
  background: linear-gradient(135deg, #573cfa 0%, #7b5cff 100%) !important;
  color: #ffffff !important;
}

/* CTA sections */
.cta-section, .book-appointment-box {
  background: linear-gradient(135deg, #573cfa 0%, #7b5cff 100%);
  color: #fff;
}

.cta-section .btn-primary, .book-appointment-box .btn-primary {
  background: linear-gradient(135deg, #E4FF97 0%, #d4f070 100%) !important;
  color: #2d3b00 !important;
}

/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */

.scroll-top, .scrollToTop, #scrollToTop, .back-to-top {
  border-radius: 50% !important;
  width: 50px !important;
  height: 50px !important;
  background: linear-gradient(135deg, #E4FF97 0%, #d4f070 100%) !important;
  box-shadow: 0 4px 20px rgba(228, 255, 151, 0.6), 0 0 30px rgba(228, 255, 151, 0.4) !important;
  color: #2d3b00 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.scroll-top:hover, .scrollToTop:hover, #scrollToTop:hover, .back-to-top:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 25px rgba(228, 255, 151, 0.8), 0 0 40px rgba(228, 255, 151, 0.5) !important;
}

.scroll-top i, .scrollToTop i, #scrollToTop i, .back-to-top i {
  color: #2d3b00 !important;
}

/* ============================================
   ACCESSIBILITY - TEXT CONTRAST
   ============================================ */

.section-title .title {
  color: #22015c;
  font-weight: 700;
}

.section-title .decorator-title {
  color: #5a7a00;
  letter-spacing: 1px;
}

.text-body {
  color: #3d3d3d !important;
}

.text-muted {
  color: #5a6474 !important;
}

/* Price styling */
.price, .product-price {
  color: #573cfa;
  font-weight: 700;
}

.price del, .product-price del {
  color: #9ca3af;
  font-weight: 400;
}

/* Links */
a:not(.btn) {
  color: #573cfa;
  transition: color 0.3s ease;
}

a:hover:not(.btn) {
  color: #4630d9 !important;
}

a.view-all, .view-all-link {
  font-weight: 600;
  color: #573cfa;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

a.view-all:hover, .view-all-link:hover {
  color: #4630d9;
  gap: 10px;
}

/* ============================================
   INPUT FIELDS
   ============================================ */

.form-control, .form-select {
  border-radius: 10px;
  border: 2px solid #e5e7eb;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus, .form-select:focus {
  border-color: #E4FF97;
  box-shadow: 0 0 0 4px rgba(228, 255, 151, 0.3);
}

/* ============================================
   FAQ ACCORDION
   ============================================ */

.accordion-item {
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(87, 60, 250, 0.1);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(87, 60, 250, 0.05);
}

.accordion-button {
  border-radius: 12px;
  font-weight: 600;
  color: #22015c;
}

.accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, rgba(228, 255, 151, 0.3) 0%, rgba(228, 255, 151, 0.1) 100%);
  color: #5a7a00;
}

/* ============================================
   WHY CHOOSE SECTION - ORIGINAL LAYOUT
   ============================================ */

.why-choose-section-wrapper {
  border-radius: 16px;
}

.choose-us-card {
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.3s ease, background 0.3s ease;
  box-shadow: 0 4px 15px rgba(87, 60, 250, 0.1);
}

.choose-us-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(87, 60, 250, 0.15);
}

.icon-color {
  color: #E4FF97 !important;
}

/* ============================================
   FOOTER
   ============================================ */

footer .footer-menu li a {
  transition: color 0.3s ease, padding-left 0.3s ease;
}

footer .footer-menu li a:hover {
  padding-left: 8px;
  color: #E4FF97 !important;
}

/* ============================================
   BADGES & TAGS
   ============================================ */

.badge-primary, .bg-soft-primary {
  background: rgba(228, 255, 151, 0.3) !important;
  color: #5a7a00 !important;
}

.badge-secondary {
  background: rgba(87, 60, 250, 0.1) !important;
  color: #573cfa !important;
}

/* ============================================
   NAVBAR
   ============================================ */

.navbar-nav .nav-link {
  position: relative;
}

.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #E4FF97;
  transition: width 0.3s ease, left 0.3s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 100%;
  left: 0;
}

/* ============================================
   CTA ANIMATION
   ============================================ */

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.book-appointment-box .btn {
  animation: pulse 2s infinite;
}

.book-appointment-box .btn:hover {
  animation: none;
}

/* Global Transitions */
*, *::before, *::after {
  transition: all 0.3s ease;
}

/* Rating Stars */
.rating i, .star-rating i {
  color: #fbbf24;
}

/* ============================================
   BOOK APPOINTMENT SECTION
   ============================================ */

.book-appointment-box {
  background: #E4FF97 !important;
  color: #2d3b00 !important;
}

.book-appointment-box * {
  color: #2d3b00;
}

.book-appointment-box .btn-primary {
  background: linear-gradient(135deg, #573cfa 0%, #7b5cff 100%) !important;
  color: #ffffff !important;
}

.book-appointment-box .btn-primary:hover {
  background: linear-gradient(135deg, #4630d9 0%, #573cfa 100%) !important;
  color: #ffffff !important;
}

.book-appointment-box h4,
.book-appointment-box h5,
.book-appointment-box h6,
.book-appointment-box .title {
  color: #2d3b00 !important;
}

/* ============================================
   ORANGE ACCENT OVERRIDES TO LIME
   ============================================ */

/* Orange subtle backgrounds */
.bg-orange-subtle {
  background-color: rgba(228, 255, 151, 0.2) !important;
}

/* Soft orange to soft lime */
.bg-soft-orange {
  background-color: rgba(228, 255, 151, 0.15) !important;
}

/* Text orange to lime dark */
.text-orange {
  color: #5a7a00 !important;
}

/* Border orange to lime */
.border-orange {
  border-color: #E4FF97 !important;
}

/* All orange rgba variations */
.bg-orange {
  background-color: #E4FF97 !important;
}

/* Lime subtle background (replaces orange subtle) */
.bg-orange-subtle, .bg-lime-subtle {
  background-color: rgba(228, 255, 151, 0.15) !important;
}

/* Why Choose section background */
.why-choose-section-wrapper {
  background-color: rgba(228, 255, 151, 0.15) !important;
}

/* ============================================
   BUTTONS - SOLID COLOR #573cfa
   ============================================ */

.btn-primary {
  background: #573cfa !important;
  background-image: none !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(87, 60, 250, 0.3);
  font-weight: 600 !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #4630d9 !important;
  background-image: none !important;
  box-shadow: 0 6px 20px rgba(87, 60, 250, 0.4);
  transform: translateY(-2px);
  color: #ffffff !important;
}

.btn-secondary {
  background: #573cfa !important;
  background-image: none !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(87, 60, 250, 0.3);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background: #4630d9 !important;
  background-image: none !important;
  transform: translateY(-2px);
  color: #ffffff !important;
}

/* Book appointment box button */
.book-appointment-box .btn-primary,
.book-appointment-box .btn-secondary,
.cta-section .btn-primary,
.cta-section .btn-secondary {
  background: #573cfa !important;
  background-image: none !important;
  color: #ffffff !important;
}

.book-appointment-box .btn-primary:hover,
.book-appointment-box .btn-secondary:hover,
.cta-section .btn-primary:hover,
.cta-section .btn-secondary:hover {
  background: #4630d9 !important;
  background-image: none !important;
}

/* Scroll to top button */
.scroll-top, .scrollToTop, #scrollToTop, .back-to-top {
  background: #573cfa !important;
  background-image: none !important;
  box-shadow: 0 4px 20px rgba(87, 60, 250, 0.5), 0 0 30px rgba(87, 60, 250, 0.3) !important;
  color: #ffffff !important;
}

.scroll-top:hover, .scrollToTop:hover, #scrollToTop:hover, .back-to-top:hover {
  background: #4630d9 !important;
  background-image: none !important;
}

.scroll-top i, .scrollToTop i, #scrollToTop i, .back-to-top i {
  color: #ffffff !important;
}

/* ============================================
   FOOTER COPYRIGHT TEXT
   ============================================ */

footer .copyright,
footer .copyright-text,
footer p.copyright,
footer .footer-bottom p,
footer .footer-copyright,
.footer-area .copyright,
.copyright-area p,
.copyright-section p,
footer .text-white,
footer p {
  color: #573cfa !important;
}

/* Footer bottom area */
.footer-bottom,
.copyright-area,
.copyright-section {
  color: #573cfa !important;
}

.footer-bottom a,
.copyright-area a {
  color: #573cfa !important;
}

.footer-bottom a:hover,
.copyright-area a:hover {
  color: #4630d9 !important;
}