@import url('snd-player-global.css');
@import url('interface/snd-purchaser.css');
@import url('account/downloads.css');
@import url('interface/list-cat-posts.css');

/* WaveSurfer.js Integration */
.snd-waveform {
    width: 100%;
    margin: 10px 0;
    cursor: pointer;
    position: relative;
    background: #f5f5f5;
    border-radius: 3px;
}

.snd-waveform wave {
    overflow: hidden !important;
    display: block !important;
}

.snd-waveform canvas {
    max-width: 100%;
    height: auto;
}

.snd-player-container.wavesurfer-ready audio {
    display: none;
}

.snd-player-container .snd-play-button {

    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    margin: 5px 0;
}



/* Ensure WaveSurfer works with existing skins */
.dark .snd-waveform,
.light .snd-waveform,
.custom .snd-waveform {
    margin-top: 10px;
    padding: 5px;
    background: rgba(0,0,0,0.05);
}

/* Loading state */
.snd-waveform:empty::before {
    content: "Loading waveform...";
    display: block;
    text-align: center;
    padding: 20px;
    color: #999;
    font-style: italic;
}

/* Responsive waveform */
@media (max-width: 768px) {
    .snd-waveform {
        height: 40px !important;
    }
}

/* Audio Engine section styling to match existing admin styles */
.snd-engine-info {
    margin-bottom: 15px;
    color: #666;
}

/* Play button on cover styles */
.snd-play-on-cover.playing {
    background: rgba(0,0,0,0.8);
    color: white;
}

.snd-play-on-cover.playing svg {
    display: none;
}

.snd-play-on-cover.playing::after {
    content: "";
    width: 20px;
    height: 20px;
    border: 3px solid #ddd;
    border-color: #ddd transparent transparent transparent;
    border-radius: 50%;
    animation: snd-spin 1s linear infinite;
}

@keyframes snd-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hide player container on shop pages when on_cover is enabled */
.woocommerce ul.products li.product .snd-hidden-player-container {
    position: absolute;
    left: -9999px;
    visibility: hidden;
}


/* Additional hover states for CSS controls - moved to individual theme files */

/* Hide download button and playback rate controls in HTML5 audio */
audio::-webkit-media-controls-download-button {
    display: none !important;
}

audio::-webkit-media-controls-playback-rate-button {
    display: none !important;
}

audio::-webkit-media-controls-enclosure {
    overflow: hidden;
}

/* Firefox */
audio::-moz-media-controls-download-button {
    display: none !important;
}

/* Prevent right-click context menu on audio elements */
audio {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



/* Player main column styling (left side where images used to be) */
.snd-player-main-column {
    /* Inherit WooCommerce gallery styling */
    width: 100%;
}

.snd-player-main-column .woocommerce-product-gallery__wrapper {
    /* Ensure proper spacing */
    position: relative;
}

.snd-custom-product-title {
    font-size: 1.2rem !important;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #333;
}

/* Price section styling */
.snd-price-section {
    margin-top: 1rem;
    font-size: 1rem;
    text-align: center;
    padding: 0.75rem;
}

/* WooCommerce cart form styling */
.single-product .summary form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 1em !important;
}

.single-product .summary form.cart .quantity {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.single-product .summary form.cart .single_add_to_cart_button {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Create a wrapper for cart form + PayPal to make them inline */
.single-product .summary form.cart,
.single-product .summary form.cart + div {
    display: inline-block !important;
    vertical-align: top !important;
}

/* Target the container that holds both cart form and PayPal */
.single-product .summary .woocommerce-variation-add-to-cart,
.single-product .summary .product form.cart {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

/* PayPal button container - target various possible selectors */
.single-product .summary div[id*="paypal"],
.single-product .summary .wc-paypal-checkout-buttons,
.single-product .summary .paypal-buttons,
.paypal-button {
    width: auto !important;
    max-width: 280px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Make the entire cart area display as flexbox */
.single-product .summary .cart,
.single-product .summary > form,
.single-product .summary > div:has(form.cart) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.download-all-wrapper button {
    background-color: #241f1f;
}

.download-all-wrapper button:hover {
    background-color: #241f1f;
    scale: 1.05;
}

.woocommerce ul.products li.product {
    padding: 0 ;
}

/* Target PayPal wrapper that appears after cart form */
.single-product .summary form.cart + div,
.single-product .summary .cart + div,
.single-product .summary div[id*="paypal"],
.single-product .summary .paypal-buttons,
.single-product .summary .wc-paypal-checkout-buttons {
    display: inline-block !important;
    margin: 0 !important;
    vertical-align: middle !important;
    min-width: 240px !important;
}
.single-product div.product form.cart {
    margin-bottom: 0 !important;
    padding: 0 !important;
}
/* New product header section */
.snd-product-header {
    margin-top: 1rem;
}

.snd-purchase-option {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e1e1e1;
}

.snd-option-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.snd-streaming-section {
    margin-bottom: 1.5rem;
}

.snd-streaming-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.snd-streaming-description {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.snd-download-info {
    font-size: 0.9rem;
    color: #444;
    margin-bottom: 0;
}

.snd-product-description {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
}

.snd-product-description p:last-child {
    margin-bottom: 0;
}

.snd-buy-link {
    color: #d77b11 !important;
    text-decoration: none !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.snd-buy-link:hover {
    color: #b86609 !important;
    text-decoration: underline !important;
}

.snd-price-text {
    font-weight: normal;
}

.snd-price-amount {
    font-weight: 600;
    color: #d77b11;
}


/* Product gallery when moved to summary (right column) */
.single-product .summary .woocommerce-product-gallery {
    box-sizing: border-box;
    overflow: hidden;
}

.single-product .summary .woocommerce-product-gallery__wrapper {
    box-sizing: border-box;
    overflow: hidden;
}

/* Base styles for product gallery images */
.single-product .summary .woocommerce-product-gallery .wp-post-image,
.single-product .summary .woocommerce-product-gallery img {
    height: auto;
    box-sizing: border-box;
    display: block; /* Prevent inline spacing issues */
}

/* Desktop/large screens - allow gallery to take up more space */
@media (min-width: 769px) {
    .single-product .summary .woocommerce-product-gallery {
        max-width: 90%; /* Allow gallery to use most of the summary column */
        margin: 0 0 1rem 0; /* Remove centering, align with other content */
    }
    
    .single-product .summary .woocommerce-product-gallery  {
        width: 100% !important; /* Fill the gallery container */
        max-width: 500px !important; /* Reasonable maximum size */
        height: auto !important;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .snd-player-main-column,
    .single-product div.product .summary {
        flex: 0 0 100%;
        max-width: 100%;
        margin-right: 0;
    }
    
    .single-product .summary .woocommerce-product-gallery {
        order: 1;
        margin-bottom: 1em;
        /* Full width and proper containment on mobile */
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-shrink: 1; /* Allow gallery to shrink in flex containers on mobile */
        min-width: 0; /* Prevent flex item from maintaining intrinsic width on mobile */
    }
    
    /* High specificity override for mobile - prevent overflow */
    .single-product .summary .woocommerce-product-gallery img.wp-post-image {
        max-width: 100% !important; /* Strict containment on mobile */
        width: 100% !important; /* Full width on mobile to prevent overflow */
        height: auto !important;
        box-sizing: border-box !important;
        display: block !important;
    }
}

/* Additional responsive rules for smaller screens */
@media (max-width: 480px) {
    .single-product .summary .woocommerce-product-gallery {
        margin-left: 0;
        margin-right: 0;
        /* Force contain on very small screens */
        overflow: hidden !important;
    }
}

/* Fix WooCommerce grid overflow for tooltips */
.single-product div.product,
.single-product .summary,
.woocommerce div.product,
.woocommerce .summary {
    overflow: visible !important;
}

/* Ensure product page main containers allow tooltip overflow */
.site-main,
.content-area,
.woocommerce-page,
.single-product-page {
    overflow: visible !important;
}

/* Reduce spacing between gallery and purchasers section */
.single-product .summary .woocommerce-product-gallery {
    margin-bottom: 0.5rem !important;
}

/* Ensure tight spacing after gallery wrapper */
.single-product .summary .woocommerce-product-gallery__wrapper {
    margin-bottom: 0 !important;
}

/* Force tight spacing on any element before purchasers section */
.single-product .summary > *:has(+ .snd-purchasers-section) {
    margin-bottom: 0 !important;
}

/* Direct targeting - remove spacing from element immediately before purchasers */
.snd-purchasers-section {
    margin-top: 0.5rem !important;
}

/* Login Button Styles */
.snd-login-button-container {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    font-family: inherit;
}

.snd-user-greeting {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
}

.snd-login-button {
    background: rgba(52, 152, 219, 0.08);
    color: #2980b9 !important;
    padding: 10px 20px;
    border-radius: 24px;
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.25px;
    text-transform: uppercase;
    transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    border: 1px solid rgba(52, 152, 219, 0.24);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    overflow: hidden;
}

.snd-login-button:hover {
    background: rgba(52, 152, 219, 0.12);
    color: #2980b9 !important;
    text-decoration: none;
    border-color: rgba(52, 152, 219, 0.4);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.16);
}

.snd-logout-button {
    background: #e74c3c !important;
}

.snd-logout-button:hover {
    background: #c0392b !important;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.snd-signup-button {
    background: rgba(39, 174, 96, 0.08) !important;
    color: #229954 !important;
    border: 1px solid rgba(39, 174, 96, 0.24) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25px !important;
    text-transform: uppercase !important;
    padding: 10px 20px !important;
    border-radius: 24px !important;
    transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    line-height: 1 !important;
    position: relative !important;
    overflow: hidden !important;
}

.snd-signup-button:hover {
    background: rgba(39, 174, 96, 0.12) !important;
    color: #229954 !important;
    border-color: rgba(39, 174, 96, 0.4) !important;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.16) !important;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    /* Increase header height to accommodate login buttons */
    header,
    .site-header,
    #masthead {
        padding-top: 80px !important;
    }
    
    .snd-login-button-container {
        position: absolute;
        top: 10px;
        right: 55px;
        width: auto;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        padding: 8px 12px;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(10px);
        border-radius: 8px;
        box-shadow: none;
        z-index: 1001;
        margin-bottom: 0px;
    }
    
    .snd-user-greeting {
        font-size: 12px;
        display: none; /* Hide greeting on mobile to save space */
    }
    
    .snd-login-button {
        padding: 10px 20px;
        font-size: 13px;
        font-weight: 600;
        margin: 0;
        text-align: center;
        min-width: 80px;
        border-radius: 24px;
    }
}