/*
 * Yewodze Enterprise - Mobile Button Enhancements
 * Improves button styling for mobile devices
 */

/* General button improvements for mobile */
@media (max-width: 768px) {
    /* Hero section buttons */
    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        margin-top: 1.5rem;
    }

    .hero-buttons .btn {
        width: 100%;
        margin-left: 0 !important;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Featured products section buttons at bottom */
    .featured-products .text-center .btn-lg {
        width: 100%;
        margin: 0 0 10px 0 !important;
        display: block;
    }

    /* Product card action buttons */
    .product-actions {
        flex-direction: column;
        gap: 10px;
    }

    .product-actions .view-details-btn,
    .product-actions .inquiry-btn {
        width: 100%;
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        justify-content: center;
    }

    /* Learn More button in About section */
    .about-content .learn-more-btn {
        width: 100%;
        display: block;
        text-align: center;
        padding: 0.75rem 1rem;
    }

    /* Contact CTA section buttons */
    .contact-cta .mt-4 {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .contact-cta .btn {
        width: 100%;
        margin-left: 0 !important;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}

/* Extra small devices (phones, 576px and down) */
@media (max-width: 576px) {
    /* Make buttons slightly smaller on very small screens */
    .hero-buttons .btn,
    .featured-products .text-center .btn-lg,
    .product-actions .view-details-btn,
    .product-actions .inquiry-btn,
    .about-content .learn-more-btn,
    .contact-cta .btn {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }

    /* Reduce icon size */
    .btn i {
        font-size: 0.9rem;
    }

    /* Products page specific adjustments */
    .products-grid .product-actions {
        flex-direction: column;
        gap: 8px;
    }

    .products-grid .view-details-btn,
    .products-grid .inquiry-btn {
        width: 100%;
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }

    .products-grid .view-details-btn::before,
    .products-grid .inquiry-btn::before {
        font-size: 0.8rem;
    }
}