/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Checkbox to select if want to start with mid level - on single product page. */
table.variations .nma_course_level_check__field {
	margin-top: 8px;
}

/* CSS for pause and cancel buttons in subscription action dialogs */
a.nma-suspend:link, a.nma-cancel:link {
	color: #ffffff;
	font-weight: 600;
}
.nma-cancel
{
	background-color: #FC7A00 !important;
	color:white !important;
}
.nma-cancel:hover
{
	background-color: white !important;
	color:#FC7A00 !important;
}
.ui-dialog-buttonset .ui-button
{
	border-radius: 5px !important;
	border: 2px solid #FC7A00 !important; 
	color: #FC7A00 !important;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px !important;
	font-weight: 700;
}
/* Bp groups - to show hidden groups of a user to him, on /groups page and profile->groups page */
.groups-list li.hidden.is-member {
	display: block !important;
}

/* hide pay button on my-appointment shortcode */
table.my-appointments .appointments-paid-button {
	display: none;
}

.nma-activity-video {
	display: inline-block;
}

/* pipe recorder css*/
.nma_recorder_container .pipeRecordRTC {
	margin: auto;
}

.nma_recorder_container {
	padding: 1rem 0;
	text-align: center;
}

.nma_recorder_container .addpipe-recorder {
	display: inline-block;
}

.groups.activity_update .addpipe-playback video {
    width: 25rem;
}

.groups.activity_update .player-playback {
    border-radius: 5px;
}

.nma_update_button_wrap {
	display: inline-block;
}

.nma_update_button_wrap {
	margin-left: 1rem;
}

/* css for subscription action buttons */
table.shop_table.subscription_details a.button {
    white-space: nowrap;
    min-width: 9rem;
    margin: .2rem;
    display: inline-block;
}

table.shop_table.subscription_details a.button.restricted {
    pointer-events: none;
    background-color: #bebebe;
    color: #848484;
}

/* Customized CSS */
/*expand collapse link*/
.buddypress .bp_members .expand_collapse {
	font-size: 1.2rem;
}
/* Customized CSS ends */

/* Disabled video audio button css */
.nma_update_button_wrap button:disabled {
	background-color: #c7c7c7;
}
/* button css ends */

.nma-cancel-subscription__dialog
{
	height: 100% !important;
}
#nma-pause-modal
{
	display: none;
}
.pause-start-date,
.pause-end-date,
.pause-start-confirm-date,
.pause-end-confirm-date
{
	font-weight: 600;
}
.pause-resume-date,
.pause-resume-confirm-date,
.next-payment-cost
{
	color:#FC7A00 !important;
	font-weight: 600;
}
.product p.wc-gzd-additional-info
{
	width: 100% !important;
	margin: 0 !important;
	text-align: center !important;
	align-self: center !important;
}
#nma_refresh_video
{
	margin-top: 40px !important;
}
.pipeBtn .pipeMobFriendlyIconBtn
{
	display: flex !important;
	position: absolute !important;
}

.pipeBtnOff .pipeMobFriendlyIconBtn
{
	display: flex !important;
	position: absolute !important;
}

.pipeBtnOff,
.pipeBtn
{
	position: relative !important;
}
.nma-early-subscription-modal-description
{
	width: 400px !important;
}

/* Custom NMA Tooltip Styles */
#nma-custom-tooltips {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    font-family: "Open Sans", "Arial", "Helvetica", sans-serif;
}

.nma-tooltip {
    position: absolute;
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    max-width: 300px;
    min-width: 150px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 99999;
}

.nma-tooltip-interactive {
    cursor: default;
}

.nma-tooltip-content {
    position: relative;
    z-index: 1;
}

/* Default arrow - pointing left (tooltip on right side) */
.nma-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #333;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
}

/* Arrow pointing to the right (when tooltip is on left side) */
.nma-tooltip-left .nma-tooltip-arrow {
    border-right: none;
    border-left: 6px solid #333;
    left: auto;
    right: -6px;
}

/* Arrow pointing DOWN (when tooltip is above element) - FIXED */
.nma-tooltip-above .nma-tooltip-arrow {
    border-top: 6px solid #333;
    border-bottom: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    left: 50%;
    top: auto;
    bottom: -6px;
    transform: translateX(-50%);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .nma-tooltip {
        max-width: 250px;
        min-width: 120px;
        font-size: 13px;
        padding: 6px 10px;
    }
    
    .nma-tooltip-arrow {
        border-top-width: 4px;
        border-bottom-width: 4px;
        border-right-width: 4px;
        border-left-width: 4px;
    }
    
    .nma-tooltip-left .nma-tooltip-arrow {
        border-left-width: 4px;
    }
    
    .nma-tooltip-above .nma-tooltip-arrow {
        border-top-width: 4px;
        border-left-width: 4px;
        border-right-width: 4px;
        border-bottom-width: 4px;
    }
}

/* Hover effects for interactive tooltips */
.nma-tooltip-interactive:hover {
    background-color: #444;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.nma-tooltip-interactive:hover .nma-tooltip-arrow {
    border-right-color: #444;
    border-left-color: #444;
    border-top-color: #444;
    border-bottom-color: #444;
}

/* Clickable content within tooltips */
.nma-tooltip-content a,
.nma-tooltip-content button {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}

.nma-tooltip-content a:hover,
.nma-tooltip-content button:hover {
    color: #ccc;
}