/**
 * WooCommerce Member Product Visibility — Front-end Styles
 *
 * IMPORTANT: We intentionally do NOT use the theme's .button class on
 * our login buttons. The Astra theme (and many WooCommerce themes) apply
 * transparent backgrounds and white text to .button, which makes our button
 * text invisible. All button styling is self-contained here.
 *
 * Colors are driven by CSS custom properties injected by PHP so the admin
 * color picker applies immediately. Hardcoded fallbacks ensure visibility
 * even in browsers that do not support CSS custom properties.
 *
 * @package WCMPV
 */

/* ---------------------------------------------------------------
   CSS custom properties — overridden by PHP inline <style>
--------------------------------------------------------------- */
:root {
    --wcmpv-blur:            8px;
    --wcmpv-btn-bg:          #0f172a;
    --wcmpv-btn-color:       #ffffff;
    --wcmpv-btn-hover-bg:    #1e293b;
    --wcmpv-btn-hover-color: #ffffff;
}

/* ---------------------------------------------------------------
   Shared blur utility
--------------------------------------------------------------- */
.wcmpv-blur-wrap {
    -webkit-filter: blur( var(--wcmpv-blur) );
            filter: blur( var(--wcmpv-blur) );
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------------------------------------------------------------
   LOOP (shop / archive) — image blur via :has() marker
--------------------------------------------------------------- */
li.product:has( .wcmpv-card-marker ) > a > img,
li.product:has( .wcmpv-card-marker ) > a img,
li.product:has( .wcmpv-card-marker ) .attachment-woocommerce_thumbnail,
li.product:has( .wcmpv-card-marker ) .wp-post-image {
    -webkit-filter: blur( var(--wcmpv-blur) );
            filter: blur( var(--wcmpv-blur) );
    pointer-events: none;
}

/* Fallback for browsers without :has() */
li.product.wcmpv-card-restricted > a > img,
li.product.wcmpv-card-restricted > a img,
li.product.wcmpv-card-restricted .attachment-woocommerce_thumbnail,
li.product.wcmpv-card-restricted .wp-post-image {
    -webkit-filter: blur( var(--wcmpv-blur) );
            filter: blur( var(--wcmpv-blur) );
    pointer-events: none;
}

/* Blur title + price */
.wcmpv-loop-text-blur {
    -webkit-filter: blur( var(--wcmpv-blur) );
            filter: blur( var(--wcmpv-blur) );
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------------------------------------------------------------
   SINGLE PRODUCT
--------------------------------------------------------------- */
.wcmpv-single-summary-outer {
    position: relative;
}
.wcmpv-single-summary-blur {
    display: block;
}
.wcmpv-single-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    background: rgba(255,255,255,0.45);
    pointer-events: none;
}
.wcmpv-single-overlay__inner {
    text-align: center;
    padding: 28px 32px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    max-width: 440px;
    width: 90%;
    pointer-events: all;
}
.wcmpv-single-overlay__message {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.65;
    color: #475569;
}
.wcmpv-tabs-blur { display: block; }

/* ---------------------------------------------------------------
   LOGIN / JOIN BUTTON
   ---------------------------------------------------------------
   HIGH SPECIFICITY + !important used deliberately to override:
     - Astra theme .button { background: transparent; color: #fff }
     - WooCommerce .button { ... }
     - Any inherited link color
   
   We do NOT add "button" class to our anchor — it's not needed and
   causes theme style conflicts that make text invisible.
--------------------------------------------------------------- */

/* Base button — all contexts */
a.wcmpv-login-btn {
    display: inline-block !important;
    padding: 11px 26px !important;
    /* Hardcoded fallback (CSS vars may not be supported by all browsers) */
    background-color: #0f172a !important;
    color: #ffffff !important;
    /* Override with CSS custom property where supported */
    background-color: var(--wcmpv-btn-bg, #0f172a) !important;
    color: var(--wcmpv-btn-color, #ffffff) !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    border: none !important;
    outline: none !important;
    letter-spacing: 0.01em !important;
    pointer-events: all !important;
    -webkit-filter: none !important;
            filter: none !important;
    position: relative !important;
    z-index: 25 !important;
    box-shadow: none !important;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease !important;
    /* Prevent theme from reverting these */
    opacity: 1 !important;
    visibility: visible !important;
}

a.wcmpv-login-btn:hover,
a.wcmpv-login-btn:focus {
    background-color: #1e293b !important;
    color: #ffffff !important;
    background-color: var(--wcmpv-btn-hover-bg, #1e293b) !important;
    color: var(--wcmpv-btn-hover-color, #ffffff) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

/* Loop card button — full width */
a.wcmpv-login-btn.wcmpv-loop-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
}

/* Single product overlay button — slightly larger */
a.wcmpv-login-btn.wcmpv-single-btn {
    padding: 13px 32px !important;
    font-size: 15px !important;
}

/* SBQA grid shortcode button — full width, matches grid card sizing */
a.wcmpv-login-btn.wcmpv-grid-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
}

/* ---------------------------------------------------------------
   ADMIN SETTINGS — Select2 styled tags + color picker
--------------------------------------------------------------- */
.wcmpv-settings-wrap .form-table th { width: 230px; }
.wcmpv-settings-wrap h2.title { font-size: 1.2em; margin-top: 1.8em; }

/* Selected tag chip */
.wcmpv-settings-wrap .select2-container--default .select2-selection--multiple
    .select2-selection__choice {
    background-color: #1d2327;
    color: #fff;
    border: 1px solid #1d2327;
    border-radius: 4px;
    padding: 3px 30px 3px 10px;
    font-size: 13px;
    font-weight: 600;
    position: relative;
    line-height: 1.5;
    margin: 3px 4px 3px 0;
}

/* Red × remove button */
.wcmpv-settings-wrap .select2-container--default .select2-selection--multiple
    .select2-selection__choice__remove {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff !important;
    background: #e11d48;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    border: none;
    padding: 0;
}
.wcmpv-settings-wrap .select2-container--default .select2-selection--multiple
    .select2-selection__choice__remove:hover {
    background: #be123c;
    color: #fff !important;
}

.wcmpv-settings-wrap .select2-container--default .select2-selection--multiple {
    min-height: 42px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    padding: 4px 6px;
}
.wcmpv-settings-wrap .select2-container--default.select2-container--focus
    .select2-selection--multiple {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

/* Color picker input */
.wcmpv-settings-wrap input[type="color"].wcmpv-color-picker {
    width: 48px;
    height: 36px;
    padding: 2px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
}

/* ---------------------------------------------------------------
   Accessibility
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    a.wcmpv-login-btn { transition: none !important; }
}