/* ================================================================
   ENHANCED BUTTON STYLES
   Современные стили кнопок по образцу топовых казино-сайтов
   ================================================================ */

/* ===== PRIMARY CTA BUTTONS ===== */
/* Главные кнопки Call-to-Action (Register, Login, Play Now) */

.header__cta,
.header__mobile-cta,
.hero-cta-btn,
.cta-button,
.casino-reviews-table__btn,
.bonuses-grid__btn {
    /* Gradient background для глубины */
    background: linear-gradient(135deg, var(--button-color, #10b981) 0%, color-mix(in srgb, var(--button-color, #10b981) 80%, black) 100%) !important;

    /* Текст всегда контрастный */
    color: var(--button-text-color, #fff) !important;

    /* Rounded corners */
    border-radius: 12px;

    /* Padding для комфортного клика */
    padding: 14px 32px;

    /* Typography */
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.3px;
    text-transform: none;

    /* Border для четкости */
    border: 2px solid transparent;

    /* Box shadow для глубины */
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--button-color, #10b981) 35%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);

    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Cursor */
    cursor: pointer;

    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;

    /* Display */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    /* No underline */
    text-decoration: none !important;

    /* Position for pseudo-elements */
    position: relative;
    overflow: hidden;
}

/* Shine effect overlay */
.header__cta::before,
.hero-cta-btn::before,
.cta-button::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 0.5s ease;
}

/* ===== HOVER STATE ===== */
.header__cta:hover,
.header__mobile-cta:hover,
.hero-cta-btn:hover,
.cta-button:hover,
.casino-reviews-table__btn:hover,
.bonuses-grid__btn:hover {
    /* Lighten gradient on hover */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--button-color, #10b981) 90%, white) 0%,
        color-mix(in srgb, var(--button-color, #10b981) 70%, white) 100%) !important;

    /* Keep text visible */
    color: var(--button-text-color, #fff) !important;

    /* Lift button */
    transform: translateY(-3px) scale(1.02);

    /* Enhanced shadow */
    box-shadow:
        0 8px 24px color-mix(in srgb, var(--button-color, #10b981) 45%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 0 0 3px color-mix(in srgb, var(--button-color, #10b981) 15%, transparent);

    /* Border highlight */
    border-color: color-mix(in srgb, var(--button-color, #10b981) 40%, white);
}

/* Shine effect on hover */
.header__cta:hover::before,
.hero-cta-btn:hover::before,
.cta-button:hover::before {
    left: 100%;
}

/* ===== ACTIVE/PRESS STATE ===== */
.header__cta:active,
.header__mobile-cta:active,
.hero-cta-btn:active,
.cta-button:active {
    /* Push down */
    transform: translateY(-1px) scale(0.98);

    /* Darken on press */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--button-color, #10b981) 75%, black) 0%,
        color-mix(in srgb, var(--button-color, #10b981) 60%, black) 100%) !important;

    /* Reduce shadow */
    box-shadow:
        0 2px 8px color-mix(in srgb, var(--button-color, #10b981) 30%, transparent),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ===== SECONDARY BUTTONS ===== */
/* Outline style для вторичных действий */

.header__login,
.secondary-btn,
.outline-btn {
    /* Transparent background */
    background: transparent !important;

    /* Colored border */
    border: 2px solid var(--button-color, #10b981);

    /* Colored text */
    color: var(--button-color, #10b981) !important;

    /* Same size as primary */
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;

    /* Subtle shadow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Smooth transition */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Display */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    /* No underline */
    text-decoration: none !important;

    /* Cursor */
    cursor: pointer;
}

.header__login:hover,
.secondary-btn:hover,
.outline-btn:hover {
    /* Fill with color */
    background: var(--button-color, #10b981) !important;

    /* Text becomes white */
    color: var(--button-text-color, #fff) !important;

    /* Lift */
    transform: translateY(-2px);

    /* Enhanced shadow */
    box-shadow: 0 6px 16px color-mix(in srgb, var(--button-color, #10b981) 35%, transparent);
}

/* ===== GHOST BUTTONS ===== */
/* Minimal style для tertiary действий */

.ghost-btn,
.text-btn {
    background: transparent !important;
    border: none;
    color: var(--button-color, #10b981) !important;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.ghost-btn::after,
.text-btn::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: var(--button-color, #10b981);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.ghost-btn:hover::after,
.text-btn:hover::after {
    transform: scaleX(1);
}

.ghost-btn:hover,
.text-btn:hover {
    color: color-mix(in srgb, var(--button-color, #10b981) 80%, white) !important;
}

/* ===== DISABLED STATE ===== */

.header__cta:disabled,
.hero-cta-btn:disabled,
.cta-button:disabled,
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.5);
}

/* ===== LOADING STATE ===== */

.button-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.button-loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: button-spin 0.6s linear infinite;
}

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

/* ===== BUTTON GROUPS ===== */

.button-group {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.button-group--vertical {
    flex-direction: column;
    align-items: stretch;
}

/* ===== RESPONSIVE SIZING ===== */

/* Small buttons для компактных областей */
.btn-sm {
    padding: 10px 24px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
}

/* Large buttons для hero секций */
.btn-lg {
    padding: 18px 42px !important;
    font-size: 18px !important;
    border-radius: 14px !important;
}

/* ===== MOBILE OPTIMIZATION ===== */

@media (max-width: 768px) {
    .header__cta,
    .hero-cta-btn,
    .cta-button {
        padding: 12px 28px;
        font-size: 15px;
    }

    /* Full width на мобильных */
    .header__mobile-cta,
    .mobile-full-width {
        width: 100%;
        justify-content: center;
    }

    /* Reduce hover effects on touch devices */
    .header__cta:hover,
    .hero-cta-btn:hover,
    .cta-button:hover {
        transform: none;
    }
}

/* ===== ACCESSIBILITY ===== */

/* Focus state для keyboard navigation */
.header__cta:focus-visible,
.hero-cta-btn:focus-visible,
.cta-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--button-color, #10b981) 50%, transparent);
    outline-offset: 3px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .header__cta,
    .hero-cta-btn,
    .cta-button {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .header__cta,
    .hero-cta-btn,
    .cta-button,
    .header__login,
    .secondary-btn {
        transition: none;
        animation: none;
    }

    .header__cta::before,
    .hero-cta-btn::before,
    .cta-button::before {
        display: none;
    }
}

/* ===== SPECIAL BUTTON VARIANTS ===== */

/* Pulsing effect для важных CTA */
.btn-pulse {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow:
            0 4px 14px color-mix(in srgb, var(--button-color, #10b981) 35%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    50% {
        box-shadow:
            0 4px 20px color-mix(in srgb, var(--button-color, #10b981) 55%, transparent),
            0 0 0 4px color-mix(in srgb, var(--button-color, #10b981) 10%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
}

/* Success variant */
.btn-success {
    --button-color: #10b981 !important;
}

/* Warning variant */
.btn-warning {
    --button-color: #f59e0b !important;
}

/* Danger variant */
.btn-danger {
    --button-color: #ef4444 !important;
}

/* Premium/VIP variant with gold gradient */
.btn-premium {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    --button-color: #fbbf24 !important;
    color: #1f2937 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

.btn-premium:hover {
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%) !important;
    color: #1f2937 !important;
}