/**
 * Chatbot Buttons - EINHEITLICHES BUTTON-SYSTEM
 *
 * DRY-Prinzip: Alle Chatbot-Buttons nutzen diese Basis-Styles
 * Keine Emojis, nur Text und optionale Icons
 *
 * @package SMG_Mall_Theme
 * @since 2.1.0
 */

/* ========================================
   Base Button - SMG THEME STYLE
   ======================================== */

.chatbot-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 0.625rem);
    
    /* Padding */
    padding: clamp(0.625rem, 2vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);
    
    /* SMG Red Gradient */
    background: linear-gradient(135deg, var(--smg-600, #e31e24) 0%, var(--smg-700, #c41a1f) 100%);
    color: white;
    border: none;
    border-radius: clamp(8px, 2vw, 12px);
    
    /* Typography */
    font-size: clamp(0.875rem, 2vw, 0.9375rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    
    /* Shadow */
    box-shadow: 
        0 2px 8px rgba(var(--smg-500-rgb, 227, 30, 36), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    
    /* Interaction */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.chatbot-button:hover {
    background: linear-gradient(135deg, var(--smg-700, #c41a1f) 0%, var(--smg-800, #a01519) 100%);
    box-shadow: 
        0 4px 12px rgba(var(--smg-500-rgb, 227, 30, 36), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.chatbot-button:active {
    transform: translateY(0);
    box-shadow: 
        0 1px 4px rgba(var(--smg-500-rgb, 227, 30, 36), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.chatbot-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   Button Variants
   ======================================== */

/* Full Width */
.chatbot-button--full {
    width: 100%;
}

/* Small */
.chatbot-button--sm {
    padding: clamp(0.5rem, 2vw, 0.625rem) clamp(0.875rem, 3vw, 1rem);
    font-size: clamp(0.75rem, 2vw, 0.8125rem);
}

/* Large (für Journey Header) */
.chatbot-button--lg {
    padding: clamp(0.875rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);
    font-size: clamp(0.9375rem, 2vw, 1rem);
    font-weight: 700;
    border-radius: 999px; /* Pill Shape */
}

/* ========================================
   Icon Support (KEINE EMOJIS!)
   ======================================== */

.chatbot-button__icon {
    width: clamp(1rem, 2vw, 1.125rem);
    height: clamp(1rem, 2vw, 1.125rem);
    flex-shrink: 0;
}

/* ========================================
   Loading State
   ======================================== */

.chatbot-button--loading {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

.chatbot-button--loading .chatbot-button__icon {
    animation: spin 1s linear infinite;
}

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

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    .chatbot-button {
        padding: clamp(0.5rem, 2vw, 0.625rem) clamp(0.875rem, 3vw, 1rem);
        font-size: clamp(0.8125rem, 2vw, 0.875rem);
    }
    
    .chatbot-button--lg {
        padding: clamp(0.75rem, 2vw, 0.875rem) clamp(1.25rem, 4vw, 1.5rem);
        font-size: clamp(0.875rem, 2vw, 0.9375rem);
    }
}

/* ========================================
   PAGE LINK BUTTON (NEU)
   ======================================== */
.chatbot-page-link {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.chatbot-page-link__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, var(--smg-600, #e31e24) 0%, var(--smg-700, #c41a1f) 100%);
    color: white;
    text-decoration: none;
    border-radius: clamp(8px, 2vw, 12px);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.chatbot-page-link__button:hover {
    background: linear-gradient(135deg, var(--smg-700, #c41a1f) 0%, var(--smg-800, #a01519) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--smg-500-rgb, 227, 30, 36), 0.3);
}

.chatbot-page-link__button .chatbot-button__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 768px) {
    .chatbot-page-link__button {
        width: 100%;
        justify-content: center;
    }
}