/*
=====================================================
SUNSHINE WELLNESS CUSTOM THEME
Warm, wellness-focused design matching the logo
=====================================================
*/

/* Enhanced golden color palette from logo */
:root {
   --sunshine-gold: #ffd700; /* Rich golden yellow from logo diamond */
   --sunshine-light-gold: #ffa500; /* Warm orange-gold */
   --sunshine-beige: #b8860b; /* Darker gold for contrast */
   --sunshine-light-beige: #f5deb3; /* Wheat/cream */
   --sunshine-dark: #2f2f2f; /* Professional dark */
   --sunshine-text: #5d4e37; /* Warm brown text */
   --sunshine-light-text: #8b7355; /* Medium brown */
   --sunshine-cream: #fffef7; /* Warm cream background */
   --sunshine-warm-white: #fefdf6; /* Slightly warmer white */
}

/* Enhanced body and background styling */
body {
   background: linear-gradient(
      135deg,
      var(--sunshine-cream) 0%,
      var(--sunshine-warm-white) 100%
   );
   min-height: 100vh;
}

/* Enhanced header styling */
.site-header {
   background: rgba(253, 252, 248, 0.95);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(244, 208, 63, 0.1);
}

.header-nav .nav > li > a {
   color: var(--sunshine-text) !important;
   font-weight: 500;
   transition: all 0.3s ease;
}

.header-nav .nav > li > a:hover,
.header-nav .nav > li.active > a {
   color: var(--sunshine-gold) !important;
}

/* Enhanced button styling */
.btn {
   background: linear-gradient(
      135deg,
      var(--sunshine-gold) 0%,
      var(--sunshine-light-gold) 100%
   );
   border: none;
   color: var(--sunshine-dark);
   font-weight: 600;
   padding: 12px 30px;
   border-radius: 25px;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn:hover {
   background: linear-gradient(
      135deg,
      var(--sunshine-light-gold) 0%,
      var(--sunshine-gold) 100%
   );
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
   color: var(--sunshine-dark);
}

.btn.bg-secondry {
   background: linear-gradient(
      135deg,
      var(--sunshine-beige) 0%,
      var(--sunshine-light-beige) 100%
   );
   color: var(--sunshine-dark);
}

.btn.bg-secondry:hover {
   background: linear-gradient(
      135deg,
      var(--sunshine-light-beige) 0%,
      var(--sunshine-beige) 100%
   );
}

/* Enhanced section styling */
.section-full {
   background: var(--sunshine-cream);
   position: relative;
}

.section-full:nth-child(even) {
   background: var(--sunshine-warm-white);
}

/* Enhanced card and content box styling */
.dlab-box,
.service-box,
.testimonial-box {
   background: rgba(255, 255, 255, 0.8);
   border-radius: 15px;
   box-shadow: 0 8px 25px rgba(139, 115, 85, 0.1);
   transition: all 0.3s ease;
   border: 1px solid rgba(255, 215, 0, 0.1);
}

.dlab-box:hover,
.service-box:hover,
.testimonial-box:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 35px rgba(139, 115, 85, 0.15);
   border-color: rgba(255, 215, 0, 0.3);
}

/* Enhanced footer styling */
.site-footer {
   background: linear-gradient(135deg, var(--sunshine-dark) 0%, #1a1a1a 100%);
   color: var(--sunshine-light-beige);
}

.site-footer .footer-top {
   background: var(--sunshine-dark);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
   color: var(--sunshine-gold);
}

.site-footer a {
   color: var(--sunshine-light-beige);
   transition: color 0.3s ease;
}

.site-footer a:hover {
   color: var(--sunshine-gold);
}

/* Enhanced form styling */
.form-control {
   background: rgba(255, 255, 255, 0.9);
   border: 2px solid rgba(255, 215, 0, 0.2);
   border-radius: 8px;
   color: var(--sunshine-text);
   transition: all 0.3s ease;
}

.form-control:focus {
   border-color: var(--sunshine-gold);
   box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
   background: rgba(255, 255, 255, 1);
}

/* Enhanced navigation styling */
.sidenav {
   background: linear-gradient(135deg, var(--sunshine-dark) 0%, #1a1a1a 100%);
}

.sidenav .nav li a {
   color: var(--sunshine-light-beige);
   transition: all 0.3s ease;
}

.sidenav .nav li a:hover {
   color: var(--sunshine-gold);
   background: rgba(255, 215, 0, 0.1);
}

/* Enhanced text styling */
.text-primary {
   color: var(--sunshine-gold) !important;
}

.text-secondary {
   color: var(--sunshine-beige) !important;
}

/* Enhanced wellness-specific elements */
.wellness-highlight {
   background: linear-gradient(
      135deg,
      rgba(255, 215, 0, 0.1) 0%,
      rgba(245, 222, 179, 0.1) 100%
   );
   border-left: 4px solid var(--sunshine-gold);
   padding: 20px;
   border-radius: 0 10px 10px 0;
}

.wellness-card {
   background: rgba(255, 255, 255, 0.9);
   border-radius: 20px;
   padding: 30px;
   box-shadow: 0 10px 30px rgba(139, 115, 85, 0.1);
   border: 1px solid rgba(244, 208, 63, 0.15);
   transition: all 0.3s ease;
}

.wellness-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 40px rgba(139, 115, 85, 0.15);
}

/* Enhanced icon styling */
.icon-bx-wraper {
   transition: all 0.3s ease;
}

.icon-bx-wraper:hover {
   transform: scale(1.05);
}

.icon-bx-wraper .icon-bx {
   background: linear-gradient(
      135deg,
      var(--sunshine-gold) 0%,
      var(--sunshine-light-gold) 100%
   );
   color: var(--sunshine-dark);
   border-radius: 50%;
   box-shadow: 0 5px 15px rgba(244, 208, 63, 0.3);
}

/* Enhanced slider and carousel styling */
.owl-carousel .owl-nav button {
   background: var(--sunshine-gold) !important;
   color: var(--sunshine-dark) !important;
   border-radius: 50%;
   transition: all 0.3s ease;
}

.owl-carousel .owl-nav button:hover {
   background: var(--sunshine-light-gold) !important;
   transform: scale(1.1);
}

.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span {
   background: var(--sunshine-gold) !important;
}

/* Enhanced testimonial styling */
.testimonial-text {
   background: rgba(255, 255, 255, 0.9);
   border-radius: 15px;
   box-shadow: 0 8px 25px rgba(139, 115, 85, 0.1);
   border-left: 4px solid var(--sunshine-gold);
}

/* Enhanced service styling */
.service-item {
   background: rgba(255, 255, 255, 0.8);
   border-radius: 15px;
   padding: 25px;
   transition: all 0.3s ease;
   border: 1px solid rgba(244, 208, 63, 0.1);
}

.service-item:hover {
   background: rgba(255, 255, 255, 0.95);
   transform: translateY(-5px);
   box-shadow: 0 15px 35px rgba(139, 115, 85, 0.15);
}

/* Enhanced pricing table styling */
.pricingtable-wrapper {
   background: rgba(255, 255, 255, 0.9);
   border-radius: 20px;
   border: 2px solid rgba(244, 208, 63, 0.2);
   transition: all 0.3s ease;
}

.pricingtable-wrapper:hover {
   border-color: var(--sunshine-gold);
   transform: translateY(-5px);
   box-shadow: 0 15px 35px rgba(139, 115, 85, 0.15);
}

.pricingtable-highlight {
   border-color: var(--sunshine-gold) !important;
   background: linear-gradient(
      135deg,
      rgba(244, 208, 63, 0.05) 0%,
      rgba(232, 218, 204, 0.05) 100%
   );
}

/* Enhanced loading animation */
.sk-folding-cube .sk-cube:before {
   background-color: var(--sunshine-gold);
}

/* Enhanced mobile responsiveness */
@media (max-width: 768px) {
   .wellness-card {
      padding: 20px;
      margin-bottom: 20px;
   }

   .btn {
      padding: 10px 25px;
      font-size: 14px;
   }
}

/* Smooth scrolling enhancement */
html {
   scroll-behavior: smooth;
}

/* Enhanced focus states for accessibility */
*:focus {
   outline: 2px solid var(--sunshine-gold);
   outline-offset: 2px;
}

/* Enhanced link hover effects */
a {
   transition: color 0.3s ease;
}

/* Enhanced table styling */
.table {
   background: rgba(255, 255, 255, 0.9);
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(139, 115, 85, 0.1);
}

.table th {
   background: var(--sunshine-gold);
   color: var(--sunshine-dark);
   font-weight: 600;
}

.table td {
   border-color: rgba(244, 208, 63, 0.1);
}

/* Enhanced alert and notification styling */
.alert {
   border-radius: 10px;
   border: none;
   box-shadow: 0 5px 15px rgba(139, 115, 85, 0.1);
}

.alert-info {
   background: linear-gradient(
      135deg,
      rgba(244, 208, 63, 0.1) 0%,
      rgba(232, 218, 204, 0.1) 100%
   );
   color: var(--sunshine-text);
   border-left: 4px solid var(--sunshine-gold);
}