/* Global Button Fixes - Central House E-commerce */

/* Fix for all button hover states across the entire website */

/* Primary Buttons - Wood Accent Theme */
.btn-primary,
.btn-success,
.btn.btn-primary,
.btn.btn-success,
button.btn-primary,
button.btn-success,
input[type="submit"].btn-primary,
input[type="submit"].btn-success {
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
    border: 2px solid var(--wood-primary) !important;
    transition: all var(--transition-fast) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn.btn-primary:hover,
.btn.btn-success:hover,
button.btn-primary:hover,
button.btn-success:hover,
input[type="submit"].btn-primary:hover,
input[type="submit"].btn-success:hover {
    background: var(--wood-secondary) !important;
    color: var(--text-white) !important;
    border-color: var(--wood-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.btn-primary:focus,
.btn-success:focus,
.btn.btn-primary:focus,
.btn.btn-success:focus,
button.btn-primary:focus,
button.btn-success:focus,
input[type="submit"].btn-primary:focus,
input[type="submit"].btn-success:focus {
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
    border-color: var(--wood-primary) !important;
    box-shadow: 0 0 0 4px rgba(196, 122, 58, 0.25) !important;
    outline: none !important;
}

/* CRITICAL FIX: Override all transparent button backgrounds */
.btn-outline,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-dark,
.btn-outline-gold {
    background: var(--bg-white) !important;
    color: var(--wood-primary) !important;
    border: 2px solid var(--wood-primary) !important;
    font-weight: var(--font-semibold) !important;
    transition: all var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-3) var(--space-4) !important;
    min-height: 44px !important;
    cursor: pointer !important;
    user-select: none !important;
    text-decoration: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-dark:hover,
.btn-outline-gold:hover {
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
    border-color: var(--wood-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.btn-outline:focus,
.btn-outline-primary:focus,
.btn-outline-secondary:focus,
.btn-outline-success:focus,
.btn-outline-dark:focus,
.btn-outline-gold:focus {
    outline: none !important;
    border-color: var(--wood-primary) !important;
    box-shadow: 0 0 0 4px rgba(196, 122, 58, 0.25) !important;
}

.btn-outline:active,
.btn-outline-primary:active,
.btn-outline-secondary:active,
.btn-outline-success:active,
.btn-outline-dark:active,
.btn-outline-gold:active {
    transform: translateY(0) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Secondary Buttons - ENHANCED FOR PERFECT CONTRAST */
.btn-secondary,
.btn.btn-secondary {
    background: var(--bg-white) !important;
    color: var(--wood-primary) !important;
    border: 2px solid var(--wood-primary) !important;
    font-weight: var(--font-semibold) !important;
    transition: all var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-3) var(--space-4) !important;
    min-height: 44px !important;
    cursor: pointer !important;
    user-select: none !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    text-shadow: none !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover {
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
    border-color: var(--wood-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(196, 122, 58, 0.3) !important;
    text-shadow: none !important;
}

.btn-secondary:focus,
.btn.btn-secondary:focus {
    outline: none !important;
    border-color: var(--wood-primary) !important;
    box-shadow: 0 0 0 4px rgba(196, 122, 58, 0.25) !important;
    background: var(--bg-white) !important;
    color: var(--wood-primary) !important;
}

.btn-secondary:active,
.btn.btn-secondary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
}

/* Ghost/Transparent Buttons - CRITICAL FIX */
.btn-ghost,
.btn-transparent {
    background: var(--bg-white) !important;
    color: var(--wood-primary) !important;
    border: 2px solid var(--wood-primary) !important;
    font-weight: var(--font-semibold) !important;
    transition: all var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-3) var(--space-4) !important;
    min-height: 44px !important;
    cursor: pointer !important;
    user-select: none !important;
    text-decoration: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.btn-ghost:hover,
.btn-transparent:hover {
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
    border-color: var(--wood-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.btn-ghost:focus,
.btn-transparent:focus {
    outline: none !important;
    border-color: var(--wood-primary) !important;
    box-shadow: 0 0 0 4px rgba(196, 122, 58, 0.25) !important;
}

.btn-ghost:active,
.btn-transparent:active {
    transform: translateY(0) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Hero Section Buttons - ENHANCED FOR GRADIENT BACKGROUNDS */
.hero-section .btn,
.hero-section .btn-primary,
.hero-section .btn-secondary,
.hero-section .btn-outline,
.hero-section .btn-ghost {
    background: var(--bg-white) !important;
    color: var(--wood-primary) !important;
    border: 2px solid var(--wood-primary) !important;
    font-weight: var(--font-semibold) !important;
    transition: all var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-3) var(--space-4) !important;
    min-height: 44px !important;
    cursor: pointer !important;
    user-select: none !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    text-shadow: none !important;
}

.hero-section .btn:hover,
.hero-section .btn-primary:hover,
.hero-section .btn-secondary:hover,
.hero-section .btn-outline:hover,
.hero-section .btn-ghost:hover {
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
    border-color: var(--wood-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(196, 122, 58, 0.4) !important;
    text-shadow: none !important;
}

.hero-section .btn:focus,
.hero-section .btn-primary:focus,
.hero-section .btn-secondary:focus,
.hero-section .btn-outline:focus,
.hero-section .btn-ghost:focus {
    outline: none !important;
    border-color: var(--wood-primary) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3), 0 0 0 6px rgba(196, 122, 58, 0.25) !important;
    background: var(--bg-white) !important;
    color: var(--wood-primary) !important;
}

.hero-section .btn:active,
.hero-section .btn-primary:active,
.hero-section .btn-secondary:active,
.hero-section .btn-outline:active,
.hero-section .btn-ghost:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
}

.btn-full.btn-primary:hover {
    background: var(--wood-secondary) !important;
    color: var(--text-white) !important;
    border-color: var(--wood-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.btn-full.btn-secondary {
    background: var(--bg-white) !important;
    color: var(--wood-primary) !important;
    border: 2px solid var(--wood-primary) !important;
}

.btn-full.btn-secondary:hover {
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
    border-color: var(--wood-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Google Button */
.btn-google {
    background: var(--bg-white) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-light) !important;
}

.btn-google:hover {
    border-color: #EA4335 !important;
    background: #EA4335 !important;
    color: var(--text-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.btn-google:hover i {
    color: var(--text-white) !important;
}

/* WhatsApp Button */
.btn-success[href*="whatsapp"] {
    background: #25D366 !important;
    color: var(--text-white) !important;
    border: 2px solid #25D366 !important;
}

.btn-success[href*="whatsapp"]:hover {
    background: #128C7E !important;
    color: var(--text-white) !important;
    border-color: #128C7E !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Add to Cart Buttons */
.add-to-cart-btn,
.btn-add-to-cart {
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
    border: 2px solid var(--wood-primary) !important;
    transition: all var(--transition-fast) !important;
}

.add-to-cart-btn:hover,
.btn-add-to-cart:hover {
    background: var(--wood-secondary) !important;
    color: var(--text-white) !important;
    border-color: var(--wood-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Search Button */
.search-btn,
.btn-search {
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
    border: 2px solid var(--wood-primary) !important;
}

.search-btn:hover,
.btn-search:hover {
    background: var(--wood-secondary) !important;
    color: var(--text-white) !important;
    border-color: var(--wood-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Cart Button */
.cart-btn,
.btn-cart {
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
    border: 2px solid var(--wood-primary) !important;
}

.cart-btn:hover,
.btn-cart:hover {
    background: var(--wood-secondary) !important;
    color: var(--text-white) !important;
    border-color: var(--wood-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* View/Product Buttons */
.btn-view,
.btn-product,
.btn-outline-primary[href*="product"] {
    background: var(--bg-white) !important;
    color: var(--wood-primary) !important;
    border: 2px solid var(--wood-primary) !important;
}

.btn-view:hover,
.btn-product:hover,
.btn-outline-primary[href*="product"]:hover {
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
    border-color: var(--wood-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* CTA Buttons */
.btn-cta,
.btn-call-to-action {
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
    border: 2px solid var(--wood-primary) !important;
}

.btn-cta:hover,
.btn-call-to-action:hover {
    background: var(--wood-secondary) !important;
    color: var(--text-white) !important;
    border-color: var(--wood-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Footer and Contact Buttons */
.footer-btn,
.btn-footer,
.contact-btn,
.btn-contact {
    background: var(--wood-primary) !important;
    color: var(--text-white) !important;
    border: 2px solid var(--wood-primary) !important;
}

.footer-btn:hover,
.btn-footer:hover,
.contact-btn:hover,
.btn-contact:hover {
    background: var(--wood-secondary) !important;
    color: var(--text-white) !important;
    border-color: var(--wood-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Disabled State */
.btn:disabled,
.btn.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.btn:disabled:hover,
.btn.disabled:hover {
    transform: none !important;
    box-shadow: var(--shadow-md) !important;
}

/* Active State */
.btn:active,
.btn.active {
    transform: translateY(0) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Ensure text visibility in all states - COMPREHENSIVE FIX */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-outline,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-dark,
.btn-outline-gold,
.btn-ghost,
.btn-transparent,
.btn-full,
.btn-google,
.add-to-cart-btn,
.btn-add-to-cart,
.search-btn,
.btn-search,
.cart-btn,
.btn-cart,
.btn-view,
.btn-product,
.btn-cta,
.btn-call-to-action,
.footer-btn,
.btn-footer,
.contact-btn,
.btn-contact {
    font-weight: var(--font-semibold) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-3) var(--space-4) !important;
    min-height: 44px !important;
    cursor: pointer !important;
    user-select: none !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all var(--transition-fast) !important;
}

/* Icon styling in buttons - COMPREHENSIVE */
.btn i,
.btn-primary i,
.btn-secondary i,
.btn-success i,
.btn-outline i,
.btn-outline-primary i,
.btn-outline-secondary i,
.btn-outline-success i,
.btn-outline-dark i,
.btn-outline-gold i,
.btn-ghost i,
.btn-transparent i,
.btn-full i,
.btn-google i,
.add-to-cart-btn i,
.btn-add-to-cart i,
.search-btn i,
.btn-search i,
.cart-btn i,
.btn-cart i,
.btn-view i,
.btn-product i,
.btn-cta i,
.btn-call-to-action i,
.footer-btn i,
.btn-footer i,
.contact-btn i,
.btn-contact i {
    font-size: var(--text-sm) !important;
    opacity: 0.9 !important;
    transition: opacity var(--transition-fast) !important;
}

/* Responsive button adjustments - COMPREHENSIVE */
@media (max-width: 768px) {
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-outline,
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-success,
    .btn-outline-dark,
    .btn-outline-gold,
    .btn-ghost,
    .btn-transparent,
    .btn-full,
    .btn-google,
    .add-to-cart-btn,
    .btn-add-to-cart,
    .search-btn,
    .btn-search,
    .cart-btn,
    .btn-cart,
    .btn-view,
    .btn-product,
    .btn-cta,
    .btn-call-to-action,
    .footer-btn,
    .btn-footer,
    .contact-btn,
    .btn-contact {
        padding: var(--space-3) var(--space-4) !important;
        font-size: var(--text-sm) !important;
        min-height: 40px !important;
    }
}

@media (max-width: 480px) {
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-outline,
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-success,
    .btn-outline-dark,
    .btn-outline-gold,
    .btn-ghost,
    .btn-transparent,
    .btn-full,
    .btn-google,
    .add-to-cart-btn,
    .btn-add-to-cart,
    .search-btn,
    .btn-search,
    .cart-btn,
    .btn-cart,
    .btn-view,
    .btn-product,
    .btn-cta,
    .btn-call-to-action,
    .footer-btn,
    .btn-footer,
    .contact-btn,
    .btn-contact {
        padding: var(--space-2) var(--space-3) !important;
        font-size: var(--text-xs) !important;
        min-height: 36px !important;
    }
}