/* xl - DESKTOP STYLES */ 
/* Add/Update these specific layout modules inside your <style> block */

    .overton-right-interaction-box {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        justify-content: space-between !important;
    }

    .overton-art-frame img {
        border-radius: 6px !important;
        display: block !important;
        object-fit: cover !important;
        border: 2px solid rgba(255, 255, 255, 0.15) !important;
        width: 55px !important;
        height: 55px !important;
    }

    .overton-whatsapp-btn {
        background-color: #25D366 !important; /* Authentic WhatsApp Green */
        color: #ffffff !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        padding: 10px 16px !important;
        border-radius: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        letter-spacing: 0.5px !important;
        transition: transform 0.2s ease, background-color 0.2s ease !important;
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2) !important;
    }

    .overton-whatsapp-btn:hover {
        background-color: #20ba5a !important;
        transform: translateY(-1px) !important;
        color: #ffffff !important;
    }

    .whatsapp-icon {
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* Tweak responsive behavior for mobile screen stacking */
    @media (max-width: 767px) {
        .overton-right-interaction-box {
            width: 100% !important;
            margin-top: 4px !important;
        }
        .overton-whatsapp-btn {
            flex-grow: 1 !important;
            justify-content: center !important;
        }
    }

/* Add this under your .overton-play-button section in the CSS block */
    .overton-schedule-btn {
        background-color: rgba(255, 255, 255, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        padding: 10px 18px !important;
        font-size: 12px !important;
        border-radius: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        letter-spacing: 0.5px !important;
        transition: background-color 0.2s ease, border-color 0.2s ease !important;
    }

    .overton-schedule-btn:hover {
        background-color: rgba(255, 255, 255, 0.22) !important;
        border-color: rgba(255, 255, 255, 0.4) !important;
        color: #ffffff !important;
    }

    .schedule-icon {
        display: inline-block !important;
        vertical-align: middle !important;
        opacity: 0.9 !important;
    }

    /* Update your mobile media query at the bottom to balance the button widths */
    @media (max-width: 767px) {
        .overton-trigger-box {
            width: 100% !important;
            justify-content: space-between !important;
        }
        .overton-play-button,
        .overton-schedule-btn {
            flex-grow: 1 !important;
            justify-content: center !important;
        }
    }

