/**
 * Everbrew Member Switcher - Styles
 *
 * Componente reutilizável para alternar entre visualização de membro e não-membro
 * Usa variáveis do Elementor Site Kit para consistência
 *
 * @package    Everbrew_Customizations
 * @since      1.3.3
 */

/* ==========================================================================
   CSS Custom Properties (usando Elementor Site Kit)
   ========================================================================== */

:root {
    /* Cores do Elementor Site Kit */
    --everbrew-primary: var(--e-global-color-primary, #99C33F);
    --everbrew-secondary: var(--e-global-color-secondary, #7CA622);
    --everbrew-accent: var(--e-global-color-accent, #5C8309);
    --everbrew-text: var(--e-global-color-text, #1A171B);
    --everbrew-white: var(--e-global-color-09173ac, #FFFFFF);
    --everbrew-black: var(--e-global-color-f578313, #000000);
    --everbrew-light-green: var(--e-global-color-1939eb6, #BAE267);
    --everbrew-lighter-green: var(--e-global-color-8c412e4, #D5F397);
    --everbrew-dark: var(--e-global-color-9219da7, #18101A);
    --everbrew-error: var(--e-global-color-3976a40, #A02E2E);
    --everbrew-info: var(--e-global-color-df14112, #1978AF);
    --everbrew-warning: var(--e-global-color-0dd0579, #F29003);

    /* Switcher específico */
    --switcher-member-color: var(--everbrew-primary);
    --switcher-non-member-color: var(--everbrew-text);
    --switcher-inactive-opacity: 0.4;
    --switcher-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --switcher-gap: 8px;
}

/* ==========================================================================
   Wrapper
   ========================================================================== */

.everbrew-switcher-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
}

/* ==========================================================================
   Base Switcher
   ========================================================================== */

.everbrew-switcher {
    display: inline-flex;
    align-items: center;
    gap: var(--switcher-gap);
    user-select: none;
}

/* ==========================================================================
   Icon Style (Default)
   ========================================================================== */

.everbrew-switcher--icons {
    gap: 12px;
}

.everbrew-switcher__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--switcher-transition);
    border-radius: 8px;
    position: relative;
}

.everbrew-switcher__btn svg {
    width: 24px;
    height: 24px;
    transition: all var(--switcher-transition);
}

/* Tamanhos */
.everbrew-switcher--small .everbrew-switcher__btn {
    padding: 4px;
}

.everbrew-switcher--small .everbrew-switcher__btn svg {
    width: 16px;
    height: 16px;
}

.everbrew-switcher--large .everbrew-switcher__btn {
    padding: 12px;
}

.everbrew-switcher--large .everbrew-switcher__btn svg {
    width: 32px;
    height: 32px;
}

/* Estado inativo */
.everbrew-switcher__btn {
    opacity: var(--switcher-inactive-opacity);
    color: var(--everbrew-text);
}

.everbrew-switcher__btn:hover {
    opacity: 0.7;
}

/* Estado ativo - Membro */
.member-view .everbrew-switcher__btn--member,
.everbrew-switcher__btn--member.is-active {
    opacity: 1;
    color: var(--switcher-member-color);
}

/* Estado ativo - Não Membro */
.non-member-view .everbrew-switcher__btn--non-member,
.everbrew-switcher__btn--non-member.is-active {
    opacity: 1;
    color: var(--switcher-non-member-color);
}

/* Hover feedback */
.everbrew-switcher__btn:focus {
    outline: none;
}

.everbrew-switcher__btn:focus-visible {
    outline: 2px solid var(--everbrew-primary);
    outline-offset: 2px;
}

/* Labels */
.everbrew-switcher__label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.everbrew-switcher--small .everbrew-switcher__label {
    font-size: 10px;
}

.everbrew-switcher--large .everbrew-switcher__label {
    font-size: 14px;
}

/* ==========================================================================
   Toggle Style
   ========================================================================== */

.everbrew-switcher--toggle {
    gap: 0;
}

.everbrew-switcher__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
}

.everbrew-switcher__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.everbrew-switcher__slider {
    position: relative;
    display: flex;
    align-items: center;
    width: 60px;
    height: 32px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    transition: all var(--switcher-transition);
    padding: 4px;
}

/* Tamanhos do toggle */
.everbrew-switcher--small .everbrew-switcher__slider {
    width: 48px;
    height: 26px;
    padding: 3px;
}

.everbrew-switcher--large .everbrew-switcher__slider {
    width: 72px;
    height: 38px;
    padding: 5px;
}

/* Slider "ball" */
.everbrew-switcher__slider::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    background: var(--everbrew-white);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all var(--switcher-transition);
}

.everbrew-switcher--small .everbrew-switcher__slider::before {
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
}

.everbrew-switcher--large .everbrew-switcher__slider::before {
    top: 5px;
    left: 5px;
    width: 28px;
    height: 28px;
}

/* Toggle checked state (member) */
.everbrew-switcher__input:checked + .everbrew-switcher__slider {
    background: var(--switcher-member-color);
}

.everbrew-switcher__input:checked + .everbrew-switcher__slider::before {
    transform: translateX(28px);
}

.everbrew-switcher--small .everbrew-switcher__input:checked + .everbrew-switcher__slider::before {
    transform: translateX(22px);
}

.everbrew-switcher--large .everbrew-switcher__input:checked + .everbrew-switcher__slider::before {
    transform: translateX(34px);
}

/* Icons inside slider */
.everbrew-switcher__slider-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: all var(--switcher-transition);
}

.everbrew-switcher__slider-icon svg {
    width: 14px;
    height: 14px;
}

.everbrew-switcher--small .everbrew-switcher__slider-icon svg {
    width: 12px;
    height: 12px;
}

.everbrew-switcher--large .everbrew-switcher__slider-icon svg {
    width: 16px;
    height: 16px;
}

.everbrew-switcher__slider-icon--member {
    right: 4px;
    color: var(--everbrew-white);
    opacity: 0;
}

.everbrew-switcher__slider-icon--non-member {
    left: 4px;
    color: var(--everbrew-text);
    opacity: 0.6;
}

.everbrew-switcher__input:checked + .everbrew-switcher__slider .everbrew-switcher__slider-icon--member {
    opacity: 1;
}

.everbrew-switcher__input:checked + .everbrew-switcher__slider .everbrew-switcher__slider-icon--non-member {
    opacity: 0;
}

/* Toggle labels */
.everbrew-switcher__toggle-labels {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.everbrew-switcher__toggle-label {
    transition: all var(--switcher-transition);
}

.everbrew-switcher__toggle-label--member {
    opacity: 0.4;
    color: var(--everbrew-text);
}

.everbrew-switcher__toggle-label--non-member {
    opacity: 1;
    color: var(--everbrew-text);
}

.everbrew-switcher__input:checked ~ .everbrew-switcher__toggle-labels .everbrew-switcher__toggle-label--member {
    opacity: 1;
    color: var(--switcher-member-color);
}

.everbrew-switcher__input:checked ~ .everbrew-switcher__toggle-labels .everbrew-switcher__toggle-label--non-member {
    opacity: 0.4;
}

/* Focus */
.everbrew-switcher__input:focus-visible + .everbrew-switcher__slider {
    outline: 2px solid var(--everbrew-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Buttons Style
   ========================================================================== */

.everbrew-switcher--buttons {
    gap: 0;
}

.everbrew-switcher__buttons {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.everbrew-switcher__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--switcher-transition);
    font-size: 13px;
    font-weight: 500;
    color: var(--everbrew-text);
    opacity: 0.6;
}

.everbrew-switcher__button svg {
    width: 16px;
    height: 16px;
}

/* Tamanhos */
.everbrew-switcher--small .everbrew-switcher__button {
    padding: 6px 12px;
    font-size: 11px;
}

.everbrew-switcher--small .everbrew-switcher__button svg {
    width: 14px;
    height: 14px;
}

.everbrew-switcher--large .everbrew-switcher__button {
    padding: 12px 24px;
    font-size: 15px;
}

.everbrew-switcher--large .everbrew-switcher__button svg {
    width: 20px;
    height: 20px;
}

/* Estado hover */
.everbrew-switcher__button:hover {
    opacity: 0.8;
}

/* Estado ativo */
.everbrew-switcher__button.is-active,
.member-view .everbrew-switcher__button--member,
.non-member-view .everbrew-switcher__button--non-member {
    background: var(--everbrew-white);
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.member-view .everbrew-switcher__button--member,
.everbrew-switcher__button--member.is-active {
    color: var(--switcher-member-color);
}

.non-member-view .everbrew-switcher__button--non-member,
.everbrew-switcher__button--non-member.is-active {
    color: var(--switcher-non-member-color);
}

/* Focus */
.everbrew-switcher__button:focus {
    outline: none;
}

.everbrew-switcher__button:focus-visible {
    outline: 2px solid var(--everbrew-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Price Elements - Visibility based on member/non-member view
   ========================================================================== */

/* Classes para elementos de preço de membro */
.membro-valores,
.member-price,
.price-member,
[data-member-price],
.elementor-widget-container .member-price,
.jet-listing-grid__item .member-price {
    display: none;
}

/* Classes para elementos de preço de não-membro */
.nmembro-valores,
.non-member-price,
.price-non-member,
[data-non-member-price],
.elementor-widget-container .non-member-price,
.jet-listing-grid__item .non-member-price {
    display: block;
}

/* Quando na visualização de membro */
.member-view .membro-valores,
.member-view .member-price,
.member-view .price-member,
.member-view [data-member-price],
html.member-view .membro-valores,
html.member-view .member-price {
    display: block !important;
}

.member-view .nmembro-valores,
.member-view .non-member-price,
.member-view .price-non-member,
.member-view [data-non-member-price],
html.member-view .nmembro-valores,
html.member-view .non-member-price {
    display: none !important;
}

/* Quando na visualização de não-membro */
.non-member-view .nmembro-valores,
.non-member-view .non-member-price,
.non-member-view .price-non-member,
.non-member-view [data-non-member-price],
html.non-member-view .nmembro-valores,
html.non-member-view .non-member-price {
    display: block !important;
}

.non-member-view .membro-valores,
.non-member-view .member-price,
.non-member-view .price-member,
.non-member-view [data-member-price],
html.non-member-view .membro-valores,
html.non-member-view .member-price {
    display: none !important;
}

/* WooCommerce specific */
.member-view .woocommerce-Price-amount.member-price,
.member-view .price .member-price {
    display: inline !important;
}

.member-view .woocommerce-Price-amount.non-member-price,
.member-view .price .non-member-price {
    display: none !important;
}

.non-member-view .woocommerce-Price-amount.non-member-price,
.non-member-view .price .non-member-price {
    display: inline !important;
}

.non-member-view .woocommerce-Price-amount.member-price,
.non-member-view .price .member-price {
    display: none !important;
}

/* JetEngine/Crocoblock specific */
.member-view .jet-listing-dynamic-field.member-price,
.member-view .jet-listing-dynamic-field[data-member-price] {
    display: block !important;
}

.member-view .jet-listing-dynamic-field.non-member-price,
.member-view .jet-listing-dynamic-field[data-non-member-price] {
    display: none !important;
}

.non-member-view .jet-listing-dynamic-field.non-member-price,
.non-member-view .jet-listing-dynamic-field[data-non-member-price] {
    display: block !important;
}

.non-member-view .jet-listing-dynamic-field.member-price,
.non-member-view .jet-listing-dynamic-field[data-member-price] {
    display: none !important;
}

/* ==========================================================================
   Animações
   ========================================================================== */

@keyframes switcher-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.everbrew-switcher__btn.is-active svg,
.everbrew-switcher__button.is-active svg {
    animation: switcher-pulse 0.3s ease-out;
}

/* Transição suave para elementos de preço */
.membro-valores,
.nmembro-valores,
.member-price,
.non-member-price,
[data-member-price],
[data-non-member-price] {
    transition: opacity 0.3s ease;
}

/* ==========================================================================
   Dark Mode Support (se necessário)
   ========================================================================== */

.theme-dark .everbrew-switcher__slider {
    background: rgba(255, 255, 255, 0.1);
}

.theme-dark .everbrew-switcher__buttons {
    background: rgba(255, 255, 255, 0.05);
}

.theme-dark .everbrew-switcher__button.is-active {
    background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
    .everbrew-switcher--with-labels .everbrew-switcher__label {
        display: none;
    }

    .everbrew-switcher__toggle-labels {
        display: none;
    }

    .everbrew-switcher__button span {
        display: none;
    }

    .everbrew-switcher__button {
        padding: 8px;
    }
}

/* ==========================================================================
   Add to Cart Button - Disable quando não-membro vê como membro
   ========================================================================== */

/* Desabilitar botões quando usuário não-logado ou não-membro está vendo como membro */
body.member-view:not(.user-everclub-member) .add_to_cart_button,
body.member-view:not(.user-everclub-member) .single_add_to_cart_button,
body.member-view:not(.user-everclub-member) .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
    position: relative;
    filter: grayscale(50%);
}

/* Tooltip explicativo ao passar mouse no container */
body.member-view:not(.user-everclub-member) .add_to_cart_button::before,
body.member-view:not(.user-everclub-member) .single_add_to_cart_button::before {
    content: "Alterne para Cliente ou faça login como Membro";
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

/* Mostrar tooltip ao hover no parent container */
body.member-view:not(.user-everclub-member) .product:hover .add_to_cart_button::before,
body.member-view:not(.user-everclub-member) .cart:hover .single_add_to_cart_button::before,
body.member-view:not(.user-everclub-member) .summary:hover .single_add_to_cart_button::before {
    opacity: 1;
}

/* Seta do tooltip */
body.member-view:not(.user-everclub-member) .add_to_cart_button::after,
body.member-view:not(.user-everclub-member) .single_add_to_cart_button::after {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

body.member-view:not(.user-everclub-member) .product:hover .add_to_cart_button::after,
body.member-view:not(.user-everclub-member) .cart:hover .single_add_to_cart_button::after,
body.member-view:not(.user-everclub-member) .summary:hover .single_add_to_cart_button::after {
    opacity: 1;
}

/* Feedback de "Adicionado" (sem redirect para carrinho) */
.add_to_cart_button.added-feedback,
.single_add_to_cart_button.added-feedback {
    background-color: var(--everbrew-primary) !important;
    border-color: var(--everbrew-primary) !important;
    color: white !important;
    position: relative;
}

.add_to_cart_button.added-feedback::before,
.single_add_to_cart_button.added-feedback::before {
    content: "✓";
    margin-right: 4px;
}

/* ==========================================================================
   Elementor Editor Compatibility
   ========================================================================== */

.elementor-editor-active .everbrew-switcher {
    pointer-events: auto;
}

.elementor-editor-active .everbrew-switcher__btn--member {
    opacity: 1;
    color: var(--switcher-member-color);
}

.elementor-editor-active .everbrew-switcher__btn--non-member {
    opacity: var(--switcher-inactive-opacity);
}