/* ===== Material Design Button Styles ===== */

/* Remove the enlarging effect and add proper Material Design animations */
.btn-primary,
.btn-secondary,
.store-button,
button,
a[class*="btn"] {
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1) !important; /* Prevent scaling */
}

/* Remove any hover scale effects */
.btn-primary:hover,
.btn-secondary:hover,
.store-button:hover,
button:hover,
a[class*="btn"]:hover {
    transform: scale(1) !important; /* Keep size constant */
}

/* Material Design Ripple Effect */
.btn-primary::before,
.btn-secondary::before,
.store-button::before,
button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    pointer-events: none;
}

/* Ripple effect on click */
.btn-primary:active::before,
.btn-secondary:active::before,
.store-button:active::before,
button:active::before {
    width: 300px;
    height: 300px;
}

/* Primary Button - Material Design */
.btn-primary {
    background: linear-gradient(135deg, #0EA5E9 0%, #7C3AED 100%);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    display: inline-block;
}

.btn-primary:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #0D93D2 0%, #6B2FD8 100%);
}

.btn-primary:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.btn-primary.large {
    padding: 16px 32px;
    font-size: 16px;
}

/* Secondary Button - Material Design */
.btn-secondary {
    background: transparent;
    color: #0EA5E9;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid #0EA5E9;
    cursor: pointer;
    box-shadow: none;
    text-decoration: none;
    display: inline-block;
}

.btn-secondary:hover {
    background: rgba(14, 165, 233, 0.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.btn-secondary:active {
    background: rgba(14, 165, 233, 0.12);
    box-shadow: none;
}

.btn-secondary.large {
    padding: 16px 32px;
    font-size: 16px;
}

/* Material Design Ripple Animation */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* Ripple Effect Implementation */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple 0.6s ease-out;
    pointer-events: none;
}

/* Dark ripple for light buttons */
.btn-secondary .ripple-effect {
    background: rgba(14, 165, 233, 0.3);
}

/* Focus States - Material Design */
.btn-primary:focus,
.btn-secondary:focus,
button:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2);
}

/* Disabled State */
.btn-primary:disabled,
.btn-secondary:disabled,
button:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    box-shadow: none;
}

/* Remove pulse animation that causes size change */
.btn-primary:hover,
.hero-cta a:hover {
    animation: none !important;
}

/* FAB (Floating Action Button) Style */
.fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0EA5E9 0%, #7C3AED 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab:hover {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.14);
}

.fab:active {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.16);
}

/* Text Button - Material Design */
.text-button {
    background: transparent;
    border: none;
    color: #0EA5E9;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.text-button:hover {
    background: rgba(14, 165, 233, 0.08);
}

.text-button:active {
    background: rgba(14, 165, 233, 0.12);
}

/* Icon Button - Material Design */
.icon-button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.icon-button:hover {
    background: rgba(0, 0, 0, 0.04);
}

.icon-button:active {
    background: rgba(0, 0, 0, 0.08);
}

/* Store Buttons - Material Design */
.store-button {
    display: inline-block;
    padding: 12px 24px;
    background: #000;
    border-radius: 8px;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.store-button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
    transform: translateY(-2px);
}

.store-button:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transform: translateY(0);
}

/* Remove any conflicting animations */
@keyframes pulse {
    /* Removed to prevent size changes */
}

/* Scenario Buttons - Material Design */
.scenario-btn {
    padding: 10px 16px;
    background: white;
    border: 2px solid #E2E8F0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    font-weight: 500;
}

.scenario-btn:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
    transform: translateY(0) !important;
}

.scenario-btn:active {
    background: #F1F5F9;
}

.scenario-btn.active {
    background: linear-gradient(135deg, #0EA5E9 0%, #7C3AED 100%);
    color: white;
    border-color: transparent;
}

/* Language Buttons - Material Design */
.lang-btn,
.lang-btn-mini {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-btn:hover,
.lang-btn-mini:hover {
    transform: scale(1) !important;
    background: #F1F5F9;
}

.lang-btn:active,
.lang-btn-mini:active {
    background: #E2E8F0;
}

/* Navigation Items */
.nav-item {
    transition: color 0.2s, background-color 0.2s;
    padding: 8px 16px;
    border-radius: 4px;
}

.nav-item:hover {
    background: rgba(14, 165, 233, 0.08);
    transform: scale(1) !important;
}

/* Card Hover Effects - Material Design */
.feature-card,
.aarohi-feature-card,
.insight-card {
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover,
.aarohi-feature-card:hover,
.insight-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px) !important; /* Subtle elevation, not scale */
}

/* Override any scale transforms on buttons */
* {
    --button-scale: 1 !important;
}

button,
a[class*="btn"],
.store-button {
    transform: scale(var(--button-scale, 1)) !important;
}

button:hover,
a[class*="btn"]:hover,
.store-button:hover {
    --button-scale: 1 !important;
}

/* Ensure no animations cause size changes */
.btn-primary.large,
.btn-secondary.large {
    animation: none !important;
}

/* Mobile Touch Feedback */
@media (max-width: 768px) {
    .btn-primary:active,
    .btn-secondary:active,
    button:active {
        background-color: rgba(0, 0, 0, 0.1);
    }
    
    /* Remove hover effects on mobile */
    .btn-primary:hover,
    .btn-secondary:hover,
    button:hover {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    }
}