/* ==========================================================================
   DC Clinic - Premium Experience Components
   ==========================================================================

   Table of Contents:
   1. Scroll Progress Bar
   2. Announcement Bar
   3. Cookie Consent Banner
   4. Breadcrumb Navigation
   5. Sticky Social Contact Bar
   6. Live Chat Widget
   7. Search Overlay
   8. Toast Notification System
   9. Demo Notifications
   10. Theme Customizer Panel
   11. Premium Animations
   12. Dark Mode Overrides
   13. Responsive Adjustments
   ========================================================================== */

/* ==========================================================================
   1. Scroll Progress Bar
   ========================================================================== */
.dc-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  background: transparent;
  pointer-events: none;
}

.dc-scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--dc-gold), var(--dc-gold-light));
  border-radius: 4px;
  transition: width 0.1s linear;
}

/* ==========================================================================
   2. Announcement Bar
   ========================================================================== */
.dc-announcement {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(135deg, var(--dc-navy-deep), var(--dc-primary-container));
  color: #fff;
  overflow: hidden;
  z-index: 900;
  max-height: 60px;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.dc-announcement--hidden {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.dc-announcement__inner {
  max-width: var(--dc-container-max);
  margin: 0 auto;
  padding: 10px var(--dc-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
}

.dc-announcement__text {
  font-size: var(--dc-text-label);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-announcement__text .material-symbols-outlined {
  font-size: 18px;
  color: var(--dc-gold-light);
  flex-shrink: 0;
}

.dc-announcement__cta {
  flex-shrink: 0;
  font-size: var(--dc-text-caption);
  font-weight: 600;
  padding: 6px 16px;
  border-radius: var(--dc-radius-full);
  background: var(--dc-gold);
  color: #fff;
  text-decoration: none;
  transition: var(--dc-transition);
  white-space: nowrap;
}

.dc-announcement__cta:hover {
  background: var(--dc-gold-light);
  transform: translateY(-1px);
}

.dc-announcement__close {
  position: absolute;
  right: var(--dc-gutter);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.dc-announcement__close:hover {
  color: #fff;
}

.dc-announcement__close .material-symbols-outlined {
  font-size: 20px;
}

/* ==========================================================================
   3. Cookie Consent Banner
   ========================================================================== */
.dc-cookie-consent {
  position: fixed;
  bottom: 24px;
  left: 24px;
  max-width: 400px;
  background: #fff;
  border-radius: var(--dc-radius-2xl);
  box-shadow: 0 10px 40px rgba(10, 25, 47, 0.15);
  padding: 24px;
  z-index: 950;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
}

.dc-cookie-consent--visible {
  transform: translateY(0);
  opacity: 1;
}

.dc-cookie-consent__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full, 50%);
  background: var(--dc-surface-low);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.dc-cookie-consent__icon .material-symbols-outlined {
  font-size: 22px;
  color: var(--dc-gold);
}

.dc-cookie-consent__title {
  font-family: var(--dc-font-headline);
  font-size: var(--dc-text-body-lg);
  font-weight: 600;
  color: var(--dc-navy-deep);
  margin-bottom: 8px;
}

.dc-cookie-consent__text {
  font-size: var(--dc-text-label);
  color: var(--dc-on-surface-variant);
  line-height: 1.5;
  margin-bottom: 20px;
}

.dc-cookie-consent__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dc-cookie-consent__btn {
  font-size: var(--dc-text-label);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--dc-radius-full);
  border: none;
  cursor: pointer;
  transition: var(--dc-transition);
  white-space: nowrap;
}

.dc-cookie-consent__btn--accept {
  background: var(--dc-navy-deep);
  color: #fff;
}

.dc-cookie-consent__btn--accept:hover {
  background: var(--dc-primary-container);
  transform: translateY(-1px);
}

.dc-cookie-consent__btn--reject {
  background: var(--dc-surface-low);
  color: var(--dc-on-surface-variant);
}

.dc-cookie-consent__btn--reject:hover {
  background: var(--dc-surface-high);
}

.dc-cookie-consent__btn--settings {
  background: transparent;
  color: var(--dc-on-surface-variant);
  text-decoration: underline;
  padding: 10px 8px;
}

/* ==========================================================================
   4. Breadcrumb Navigation
   ========================================================================== */
.dc-breadcrumbs {
  padding: 16px 0;
  background: var(--dc-surface-low);
  border-bottom: 1px solid rgba(0, 31, 63, 0.05);
}

.dc-breadcrumbs__inner {
  max-width: var(--dc-container-max);
  margin: 0 auto;
  padding: 0 var(--dc-gutter);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dc-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--dc-text-caption);
  color: var(--dc-on-surface-variant);
  text-decoration: none;
  transition: color 0.2s ease;
}

.dc-breadcrumbs__item:hover {
  color: var(--dc-navy-deep);
}

.dc-breadcrumbs__item--active {
  color: var(--dc-navy-deep);
  font-weight: 600;
  pointer-events: none;
}

.dc-breadcrumbs__separator {
  font-size: 16px;
  color: var(--dc-outline-variant);
}

.dc-breadcrumbs__home .material-symbols-outlined {
  font-size: 18px;
}

/* ==========================================================================
   5. Sticky Social Contact Bar
   ========================================================================== */
.dc-social-bar {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 800;
}

.dc-social-bar__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  position: relative;
  transition: var(--dc-transition);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.dc-social-bar__btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.dc-social-bar__btn--line { background: #06C755; }
.dc-social-bar__btn--facebook { background: #1877F2; }
.dc-social-bar__btn--messenger { background: #0084FF; }
.dc-social-bar__btn--phone { background: var(--dc-navy-deep); }
.dc-social-bar__btn--email { background: var(--dc-gold); }

.dc-social-bar__tooltip {
  position: absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--dc-navy-deep);
  color: #fff;
  font-size: var(--dc-text-caption);
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--dc-radius);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dc-social-bar__btn:hover .dc-social-bar__tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(-4px);
}

.dc-social-bar__tooltip::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--dc-navy-deep);
}

/* Mobile: bottom floating action buttons */
@media (max-width: 1023px) {
  .dc-social-bar {
    right: 16px;
    bottom: 16px;
    top: auto;
    transform: none;
    flex-direction: row;
    gap: 8px;
  }

  .dc-social-bar__btn {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .dc-social-bar__tooltip {
    display: none;
  }
}

/* ==========================================================================
   6. Live Chat Widget
   ========================================================================== */
.dc-chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 850;
}

.dc-chat-widget__fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--dc-navy-deep);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 25px rgba(10, 25, 47, 0.3);
  transition: var(--dc-transition);
  position: relative;
}

.dc-chat-widget__fab:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(10, 25, 47, 0.4);
}

.dc-chat-widget__fab .material-symbols-outlined {
  font-size: 28px;
}

.dc-chat-widget__fab--close .material-symbols-outlined {
  font-size: 24px;
}

.dc-chat-widget__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e74c3c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.dc-chat-widget__pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--dc-navy-deep);
  opacity: 0.3;
  animation: dc-chat-pulse 2s ease-out infinite;
  pointer-events: none;
}

@keyframes dc-chat-pulse {
  0% { transform: scale(1); opacity: 0.3; }
  100% { transform: scale(1.6); opacity: 0; }
}

.dc-chat-widget__panel {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: 360px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border-radius: var(--dc-radius-2xl);
  box-shadow: 0 20px 60px rgba(10, 25, 47, 0.2);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transition: var(--dc-transition);
}

.dc-chat-widget__panel--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.dc-chat-widget__header {
  background: linear-gradient(135deg, var(--dc-navy-deep), var(--dc-primary-container));
  color: #fff;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dc-chat-widget__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dc-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.dc-chat-widget__info h4 {
  color: #fff;
  font-size: var(--dc-text-body);
  font-weight: 600;
  margin: 0;
}

.dc-chat-widget__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--dc-text-caption);
  color: rgba(255, 255, 255, 0.8);
}

.dc-chat-widget__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: dc-status-blink 2s ease-in-out infinite;
}

@keyframes dc-status-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.dc-chat-widget__body {
  padding: 20px;
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dc-chat-widget__message {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: var(--dc-radius-lg);
  font-size: var(--dc-text-label);
  line-height: 1.5;
  animation: dc-chat-msg-in 0.3s ease;
}

@keyframes dc-chat-msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.dc-chat-widget__message--bot {
  background: var(--dc-surface-low);
  color: var(--dc-on-surface);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}

.dc-chat-widget__message--user {
  background: var(--dc-navy-deep);
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.dc-chat-widget__quick-replies {
  padding: 0 20px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dc-chat-widget__quick-reply {
  font-size: var(--dc-text-caption);
  padding: 8px 14px;
  border-radius: var(--dc-radius-full);
  border: 1px solid var(--dc-outline-variant);
  background: #fff;
  color: var(--dc-on-surface-variant);
  cursor: pointer;
  transition: var(--dc-transition);
}

.dc-chat-widget__quick-reply:hover {
  border-color: var(--dc-navy-deep);
  color: var(--dc-navy-deep);
  background: var(--dc-surface-low);
}

.dc-chat-widget__input {
  padding: 16px 20px;
  border-top: 1px solid var(--dc-surface-high);
  display: flex;
  gap: 10px;
}

.dc-chat-widget__input input {
  flex: 1;
  border: 1px solid var(--dc-outline-variant);
  border-radius: var(--dc-radius-full);
  padding: 10px 16px;
  font-size: var(--dc-text-label);
  outline: none;
  transition: border-color 0.2s ease;
}

.dc-chat-widget__input input:focus {
  border-color: var(--dc-navy-deep);
}

.dc-chat-widget__input button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--dc-navy-deep);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--dc-transition);
}

.dc-chat-widget__input button:hover {
  background: var(--dc-primary-container);
}

@media (max-width: 1023px) {
  .dc-chat-widget {
    bottom: 80px;
    right: 16px;
  }

  .dc-social-bar {
    bottom: 80px;
  }
}

/* ==========================================================================
   7. Search Overlay
   ========================================================================== */
.dc-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 25, 47, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 990;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
}

.dc-search-overlay--open {
  opacity: 1;
  visibility: visible;
}

.dc-search-overlay__inner {
  max-width: 700px;
  margin: 80px auto;
  padding: 0 var(--dc-gutter);
}

.dc-search-overlay__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--dc-transition);
}

.dc-search-overlay__close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.dc-search-overlay__field {
  position: relative;
  margin-bottom: 32px;
}

.dc-search-overlay__field .material-symbols-outlined {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: rgba(255, 255, 255, 0.5);
}

.dc-search-overlay__input {
  width: 100%;
  padding: 20px 20px 20px 60px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--dc-radius-2xl);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: var(--dc-text-body-lg);
  font-family: var(--dc-font-body);
  outline: none;
  transition: border-color 0.2s ease;
}

.dc-search-overlay__input:focus {
  border-color: var(--dc-gold);
}

.dc-search-overlay__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.dc-search-overlay__section {
  margin-bottom: 28px;
}

.dc-search-overlay__section-title {
  font-size: var(--dc-text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 12px;
}

.dc-search-overlay__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dc-search-overlay__tag {
  padding: 8px 16px;
  border-radius: var(--dc-radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--dc-text-label);
  text-decoration: none;
  transition: var(--dc-transition);
  cursor: pointer;
  border: 1px solid transparent;
}

.dc-search-overlay__tag:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.dc-search-overlay__results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dc-search-overlay__result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--dc-radius-lg);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  text-decoration: none;
  transition: var(--dc-transition);
}

.dc-search-overlay__result:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dc-search-overlay__result .material-symbols-outlined {
  font-size: 22px;
  color: var(--dc-gold);
}

.dc-search-overlay__result-text {
  flex: 1;
}

.dc-search-overlay__result-title {
  font-size: var(--dc-text-label);
  font-weight: 500;
}

.dc-search-overlay__result-sub {
  font-size: var(--dc-text-caption);
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   8. Toast Notification System
   ========================================================================== */
.dc-toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 980;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 380px;
}

.dc-toast {
  background: #fff;
  border-radius: var(--dc-radius-lg);
  box-shadow: 0 10px 40px rgba(10, 25, 47, 0.12);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  pointer-events: auto;
  animation: dc-toast-slide-in 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

.dc-toast--removing {
  animation: dc-toast-slide-out 0.3s ease forwards;
}

@keyframes dc-toast-slide-in {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes dc-toast-slide-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(120%); opacity: 0; }
}

.dc-toast__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dc-toast__icon .material-symbols-outlined {
  font-size: 20px;
}

.dc-toast--success .dc-toast__icon { background: #e8f5e9; color: #2e7d32; }
.dc-toast--info .dc-toast__icon { background: #e3f2fd; color: #1565c0; }
.dc-toast--warning .dc-toast__icon { background: #fff3e0; color: #e65100; }
.dc-toast--promo .dc-toast__icon { background: #fce4ec; color: #c62828; }

.dc-toast__content {
  flex: 1;
  min-width: 0;
}

.dc-toast__title {
  font-size: var(--dc-text-label);
  font-weight: 600;
  color: var(--dc-navy-deep);
  margin-bottom: 2px;
}

.dc-toast__message {
  font-size: var(--dc-text-caption);
  color: var(--dc-on-surface-variant);
  line-height: 1.4;
}

.dc-toast__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--dc-outline);
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.dc-toast__close:hover {
  color: var(--dc-on-surface);
}

.dc-toast__close .material-symbols-outlined {
  font-size: 18px;
}

.dc-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--dc-gold);
  width: 100%;
  transform-origin: left;
  animation: dc-toast-progress 5s linear forwards;
}

@keyframes dc-toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* ==========================================================================
   9. Demo Notifications (social proof popups)
   ========================================================================== */
.dc-demo-notify {
  position: fixed;
  bottom: 24px;
  left: 24px;
  max-width: 340px;
  background: #fff;
  border-radius: var(--dc-radius-lg);
  box-shadow: 0 10px 40px rgba(10, 25, 47, 0.12);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 820;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
}

.dc-demo-notify--visible {
  transform: translateY(0);
  opacity: 1;
}

.dc-demo-notify__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dc-gold), var(--dc-gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.dc-demo-notify__content {
  flex: 1;
  min-width: 0;
}

.dc-demo-notify__text {
  font-size: var(--dc-text-caption);
  color: var(--dc-on-surface);
  line-height: 1.4;
}

.dc-demo-notify__text strong {
  color: var(--dc-navy-deep);
}

.dc-demo-notify__time {
  font-size: 11px;
  color: var(--dc-outline);
  margin-top: 2px;
}

.dc-demo-notify__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--dc-outline);
  flex-shrink: 0;
}

.dc-demo-notify__close .material-symbols-outlined {
  font-size: 16px;
}

@media (max-width: 1023px) {
  .dc-demo-notify {
    bottom: 80px;
    left: 16px;
    max-width: calc(100vw - 32px);
  }
}

/* ==========================================================================
   10. Theme Customizer Panel
   ========================================================================== */
.dc-customizer {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 860;
}

.dc-customizer__toggle {
  width: 44px;
  height: 44px;
  border-radius: 0 var(--dc-radius-lg) var(--dc-radius-lg) 0;
  border: none;
  background: var(--dc-navy-deep);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 0 15px rgba(10, 25, 47, 0.15);
  transition: var(--dc-transition);
}

.dc-customizer__toggle:hover {
  width: 48px;
}

.dc-customizer__toggle .material-symbols-outlined {
  font-size: 24px;
  animation: dc-customizer-spin 4s linear infinite;
}

@keyframes dc-customizer-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.dc-customizer__panel {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-100%);
  width: 300px;
  background: #fff;
  border-radius: 0 var(--dc-radius-2xl) var(--dc-radius-2xl) 0;
  box-shadow: 4px 0 30px rgba(10, 25, 47, 0.15);
  padding: 24px;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  max-height: 85vh;
  overflow-y: auto;
}

.dc-customizer--open .dc-customizer__panel {
  transform: translateY(-50%) translateX(0);
}

.dc-customizer__title {
  font-family: var(--dc-font-headline);
  font-size: var(--dc-text-body);
  font-weight: 600;
  color: var(--dc-navy-deep);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dc-customizer__group {
  margin-bottom: 20px;
}

.dc-customizer__label {
  font-size: var(--dc-text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dc-on-surface-variant);
  margin-bottom: 10px;
  display: block;
}

.dc-customizer__options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dc-customizer__option {
  padding: 8px 14px;
  border-radius: var(--dc-radius-full);
  border: 2px solid var(--dc-outline-variant);
  background: #fff;
  font-size: var(--dc-text-caption);
  font-weight: 500;
  cursor: pointer;
  transition: var(--dc-transition);
  color: var(--dc-on-surface-variant);
}

.dc-customizer__option--active {
  border-color: var(--dc-navy-deep);
  background: var(--dc-navy-deep);
  color: #fff;
}

.dc-customizer__option:hover:not(.dc-customizer__option--active) {
  border-color: var(--dc-on-surface-variant);
}

.dc-customizer__color {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: var(--dc-transition);
}

.dc-customizer__color--active {
  border-color: var(--dc-navy-deep);
  transform: scale(1.1);
}

.dc-customizer__color:hover {
  transform: scale(1.1);
}

/* ==========================================================================
   11. Premium Animations
   ========================================================================== */
@keyframes dc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dc-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dc-slide-left {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes dc-slide-right {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes dc-zoom-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes dc-card-lift {
  to { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(10, 25, 47, 0.12); }
}

.dc-animate-in {
  animation: dc-fade-in 0.6s ease forwards;
}

.dc-animate-slide-up {
  animation: dc-slide-up 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.dc-animate-slide-left {
  animation: dc-slide-left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.dc-animate-slide-right {
  animation: dc-slide-right 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.dc-animate-zoom {
  animation: dc-zoom-in 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* Scroll reveal */
.dc-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.dc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.dc-reveal--left { transform: translateX(-40px); }
.dc-reveal--right { transform: translateX(40px); }
.dc-reveal--zoom { transform: scale(0.9); }

.dc-reveal--left.is-visible,
.dc-reveal--right.is-visible,
.dc-reveal--zoom.is-visible {
  transform: translateX(0) scale(1);
}

/* Stagger delays */
.dc-reveal--delay-1 { transition-delay: 0.1s; }
.dc-reveal--delay-2 { transition-delay: 0.2s; }
.dc-reveal--delay-3 { transition-delay: 0.3s; }
.dc-reveal--delay-4 { transition-delay: 0.4s; }
.dc-reveal--delay-5 { transition-delay: 0.5s; }

/* Card hover lift */
.dc-card-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.dc-card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(10, 25, 47, 0.1);
}

/* Image zoom on hover */
.dc-img-zoom {
  overflow: hidden;
}

.dc-img-zoom img {
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.dc-img-zoom:hover img {
  transform: scale(1.08);
}

/* Button ripple */
.dc-btn-ripple {
  position: relative;
  overflow: hidden;
}

.dc-btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.dc-btn-ripple:active::after {
  width: 300px;
  height: 300px;
}

/* Number counter */
.dc-counter {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   12. Dark Mode Overrides
   ========================================================================== */
body.dc-dark-mode {
  --dc-bg: #0f1419;
  --dc-surface: #1a1f2e;
  --dc-surface-low: #1e2433;
  --dc-surface-container: #252b3d;
  --dc-surface-high: #2a3145;
  --dc-surface-highest: #303850;
  --dc-surface-variant: #353d52;
  --dc-on-surface: #e4e7ec;
  --dc-on-surface-variant: #a0a8b8;
  --dc-outline: #6b7280;
  --dc-outline-variant: #3a4156;
  --dc-navy-deep: #e4e7ec;
  --dc-shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.2);
  --dc-shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
  --dc-shadow-lg: 0 10px 40px -15px rgba(0, 0, 0, 0.3);
}

body.dc-dark-mode .dc-header {
  background: rgba(15, 20, 25, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

body.dc-dark-mode .dc-header--scrolled {
  background: rgba(15, 20, 25, 0.95);
}

body.dc-dark-mode .dc-mega-menu,
body.dc-dark-mode .dc-dropdown {
  background: var(--dc-surface);
}

body.dc-dark-mode .dc-cookie-consent,
body.dc-dark-mode .dc-toast,
body.dc-dark-mode .dc-demo-notify,
body.dc-dark-mode .dc-customizer__panel {
  background: var(--dc-surface);
}

body.dc-dark-mode .dc-chat-widget__panel {
  background: var(--dc-surface);
}

/* Font size options */
body.dc-font-small { font-size: 14px; }
body.dc-font-medium { font-size: 16px; }
body.dc-font-large { font-size: 18px; }

/* Boxed layout */
body.dc-boxed-layout {
  max-width: 1400px;
  margin: 0 auto;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
}

body.dc-boxed-layout .dc-header {
  max-width: 1400px;
  margin: 0 auto;
}

/* Animations off */
body.dc-animations-off *,
body.dc-animations-off *::before,
body.dc-animations-off *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ==========================================================================
   13. Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
  .dc-toast-container {
    top: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }

  .dc-cookie-consent {
    left: 16px;
    right: 16px;
    max-width: none;
    bottom: 16px;
  }

  .dc-customizer__panel {
    width: 260px;
  }

  .dc-announcement__inner {
    padding: 8px 48px 8px var(--dc-gutter);
  }

  .dc-announcement__text {
    font-size: var(--dc-text-caption);
  }
}