@mixin respond-to($media) {
    @if $media == xs {
        @media only screen and (max-width: $screen-xs-max) { @content; }
    }
    @else if $media == sm {
        @media only screen and (max-width: $screen-sm-max) { @content; }
    }
    @else if $media == md {
        @media only screen and (max-width: $screen-md-max) { @content; }
    }
    @else {
        @media only screen and (max-width: $media) { @content; }
    }
}

@mixin respond-from($media) {
    @if $media == xs-min {
        @media only screen and (min-width: $screen-xs-max) { @content; }
    }
    @else if $media == sm-min {
        @media only screen and (min-width: $screen-sm-max) { @content; }
    }
    @else if $media == md-min {
        @media only screen and (min-width: $screen-md-max) { @content; }
    }
    @else if $media == lg {
        @media only screen and (min-width: $screen-lg-min) { @content; }
    }
    @else {
        @media only screen and (min-width: $media) { @content; }
    }
}

// AI Suggestions mixins
@mixin ai-gradient($color1, $color2, $angle: 135deg) {
  background: linear-gradient($angle, $color1 0%, $color2 100%);
}

@mixin ai-button-base {
  border: none;
  color: $ai-white;
  font-weight: $ai-font-weight-semibold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all $ai-transition-base;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  &:focus {
    outline: none;
  }

  i {
    margin-right: $ai-spacing-sm;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
  }
}

@mixin ai-button-shimmer {
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left $ai-transition-slow;
  }

  &:hover::before {
    left: 100%;
  }
}

@mixin ai-shadow($color, $opacity: 0.3) {
  box-shadow: 0 2px 8px rgba($color, $opacity);
}

@mixin ai-shadow-hover($color, $opacity: 0.4) {
  box-shadow: 0 4px 12px rgba($color, $opacity);
  transform: translateY(-1px);
}

@mixin ai-form-control {
  border: $ai-border-width solid $ai-gray-border;
  border-radius: $ai-border-radius;
  padding: $ai-spacing-sm $ai-spacing-md;
  font-size: $ai-font-size-base;
  color: #333;
  background: $ai-white;
  transition: all $ai-transition-fast;

  &:focus {
    border-color: $ai-blue;
    box-shadow: 0 0 0 3px rgba($ai-blue, 0.1);
    outline: none;
    background: $ai-white;
  }
}

@mixin ai-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: $ai-spacing-md;
  border-bottom: $ai-border-width-lg solid $ai-blue-light;
}