// Buttons
.btn-primary {
    display: inline-block;
    padding: $spacing-md $spacing-xl;
    background: $black;
    color: $white;
    font-weight: 600;
    font-size: $font-size-base;
    border: none;
    border-radius: $radius-full;
    cursor: pointer;
    transition: all $transition-base;
    position: relative;
    overflow: hidden;
    
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba($primary-gold, 0.3), transparent);
        transition: left 0.5s;
    }
    
    &:hover {
        background: $primary-gold-dark;
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        
        &::before {
            left: 100%;
        }
    }
    
    &.btn-large {
        padding: $spacing-lg $spacing-2xl;
        font-size: $font-size-lg;
    }
}

.btn-outline {
    display: inline-block;
    padding: $spacing-md $spacing-xl;
    background: transparent;
    color: $black;
    font-weight: 600;
    font-size: $font-size-base;
    border: 2px solid $black;
    border-radius: $radius-full;
    cursor: pointer;
    transition: all $transition-base;
    
    &:hover {
        background: $black;
        color: $white;
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
    
    &.btn-white {
        color: $white;
        border-color: $white;
        
        &:hover {
            background: $white;
            color: $black;
            box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
        }
    }
}

// Cards
.card {
    background: $white;
    border-radius: $radius-lg;
    padding: $spacing-xl;
    box-shadow: $shadow-md;
    transition: all $transition-base;
    
    &:hover {
        transform: translateY(-5px);
        box-shadow: $shadow-xl;
    }
}

.feature-card {
    @extend .card;
    text-align: center;
    padding: $spacing-2xl;
    
    .feature-icon {
        margin-bottom: $spacing-lg;
        
        .icon-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            background: $light-gradient;
            border-radius: $radius-lg;
            font-size: $font-size-3xl;
            transition: all $transition-base;
        }
    }
    
    h3 {
        margin-bottom: $spacing-md;
        font-size: $font-size-xl;
        color: $black;
    }
    
    p {
        color: $dark-gray;
        line-height: 1.6;
    }
    
    &:hover {
        .icon-wrapper {
            transform: scale(1.1) rotate(5deg);
        }
    }
}

// Section Headers
.section-header {
    text-align: center;
    margin-bottom: $spacing-3xl;
    
    .section-title {
        font-size: $font-size-4xl;
        font-weight: 800;
        color: $black;
        margin-bottom: $spacing-lg;
        
        @media (max-width: $breakpoint-md) {
            font-size: $font-size-3xl;
        }
    }
    
    .section-subtitle {
        font-size: $font-size-lg;
        color: $dark-gray;
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
    }
}

// Text Gradient
.text-gradient {
    background: $gold-gradient;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

// Container
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 $spacing-xl;
    
    @media (max-width: $breakpoint-md) {
        padding: 0 $spacing-lg;
    }
}

// Grid Systems
.grid {
    display: grid;
    gap: $spacing-xl;
}

.grid-2 {
    @extend .grid;
    grid-template-columns: repeat(2, 1fr);
    
    @media (max-width: $breakpoint-md) {
        grid-template-columns: 1fr;
    }
}

.grid-3 {
    @extend .grid;
    grid-template-columns: repeat(3, 1fr);
    
    @media (max-width: $breakpoint-md) {
        grid-template-columns: 1fr;
    }
}

.grid-4 {
    @extend .grid;
    grid-template-columns: repeat(4, 1fr);
    
    @media (max-width: $breakpoint-lg) {
        grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: $breakpoint-md) {
        grid-template-columns: 1fr;
    }
}

// Forms
.form-group {
    margin-bottom: $spacing-lg;
    
    label {
        display: block;
        margin-bottom: $spacing-sm;
        font-weight: 500;
        color: $black;
    }
    
    input,
    textarea {
        width: 100%;
        padding: $spacing-md;
        background: $white;
        border: 2px solid $gray;
        border-radius: $radius-md;
        font-size: $font-size-base;
        transition: all $transition-base;
        
        &:focus {
            outline: none;
            border-color: $primary-gold;
            box-shadow: 0 0 0 3px rgba($primary-gold, 0.1);
        }
    }
}

// Badge
.badge {
    display: inline-block;
    padding: $spacing-xs $spacing-md;
    background: $secondary-gold;
    color: $black;
    font-size: $font-size-sm;
    font-weight: 600;
    border-radius: $radius-full;
}

// Loader
.loader {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid $light-gray;
    border-top-color: $primary-gold;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

