/* Responsive Button CSS */

/* Base improvements for all touch devices */
@media (hover: none) {
    /* Specific improvements for touch devices */
    .buy-now-btn, .video-buy-now-btn {
        -webkit-tap-highlight-color: rgba(0,0,0,0); /* Remove tap highlight */
        touch-action: manipulation; /* Optimize touch actions */
    }
    
    /* Make buttons slightly bigger for touch */
    .buy-now-btn {
        min-height: 42px;
    }
}

/* For tablets and small desktops (768px and below) */
@media (max-width: 768px) {
    .buy-now-btn {
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
    
    .video-buy-now-btn {
        padding: 0.8rem 1.8rem;
    }
}

/* For larger phones (576px and below) */
@media (max-width: 576px) {
    .buy-now-btn {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
        border-radius: 8px;
        white-space: nowrap;
        letter-spacing: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 44px; /* Improve touch target size */
        touch-action: manipulation; /* Optimize for touch */
    }
    
    .buy-now-btn::before {
        display: none;
    }
    
    .buy-now-btn {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }
    
    .video-buy-now-btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.95rem;
        white-space: nowrap;
        min-height: 44px;
    }
}

/* For very small phones (360px and below) */
@media screen and (max-width: 360px) {
    .buy-now-btn {
        padding: 0.5rem 0.6rem;
        font-size: 0.85rem;
        border-radius: 6px;
        width: 100%;
    }
    
    .video-buy-now-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    
    .buy-now-btn::before,
    .buy-now-btn::after,
    .video-buy-now-btn::before,
    .video-buy-now-btn::after {
        display: none;
    }
}