/**
 * Sollu - Painel Profissional
 * Estilos base do front-end (shortcodes e componentes).
 */

.sollu-front {
        --sollu-primary: #6366f1;
        --sollu-primary-dark: #4f46e5;
        --sollu-success: #10b981;
        --sollu-warning: #f59e0b;
        --sollu-danger: #ef4444;
        --sollu-bg: #f2f2f7;
        --sollu-card: #ffffff;
        --sollu-border: #e5e5ea;
        --sollu-text: #1c1c1e;
        --sollu-text-secondary: #6b7280;
        --sollu-radius: 14px;
        --sollu-radius-sm: 10px;
        --sollu-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
        --sollu-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-family: var(--sollu-font);
        color: var(--sollu-text);
}

.sollu-front * {
        box-sizing: border-box;
}

/* Container -------------------------------------------------------------- */
.sollu-container {
        max-width: 960px;
        margin: 0 auto;
        padding: 16px;
}

/* Cartão ---------------------------------------------------------------- */
.sollu-front .sollu-card {
        background: var(--sollu-card);
        border: 1px solid var(--sollu-border);
        border-radius: var(--sollu-radius);
        box-shadow: var(--sollu-shadow);
        padding: 20px;
        margin-bottom: 16px;
}

/* Abas segmentadas (estilo iOS) ---------------------------------------- */
.sollu-segmented {
        display: inline-flex;
        background: var(--sollu-bg);
        border-radius: 999px;
        padding: 4px;
        gap: 4px;
        margin-bottom: 20px;
}

.sollu-segmented button {
        border: none;
        background: transparent;
        padding: 8px 18px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        color: var(--sollu-text-secondary);
        cursor: pointer;
        transition: all 0.2s ease;
}

.sollu-segmented button.is-active {
        background: #fff;
        color: var(--sollu-primary);
        box-shadow: var(--sollu-shadow);
}

/* Botões ---------------------------------------------------------------- */
.sollu-front .sollu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 11px 20px;
        border-radius: var(--sollu-radius-sm);
        border: none;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.15s ease;
}

.sollu-front .sollu-btn-primary {
        background: var(--sollu-primary);
        color: #fff;
}

.sollu-front .sollu-btn-primary:hover {
        background: var(--sollu-primary-dark);
}

/* Badges ---------------------------------------------------------------- */
.sollu-front .sollu-badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
}

.sollu-front .sollu-badge-success { background: rgba(16, 185, 129, 0.12); color: #047857; }
.sollu-front .sollu-badge-warning { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.sollu-front .sollu-badge-danger { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }

/* Painel de histórico / listas ----------------------------------------- */
.sollu-list {
        list-style: none;
        margin: 0;
        padding: 0;
}

.sollu-list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 0;
        border-bottom: 1px solid var(--sollu-border);
}

.sollu-list-item:last-child {
        border-bottom: none;
}

/* Estado vazio ---------------------------------------------------------- */
.sollu-empty-state {
        text-align: center;
        padding: 48px 16px;
        color: var(--sollu-text-secondary);
}

/* Botão fixo de carrinho (sticky) — base ------------------------------- */
.sollu-sticky-cart {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        background: #fff;
        border-top: 1px solid var(--sollu-border);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
        padding: 10px 16px;
        display: none;
}

@media (max-width: 768px) {
        .sollu-sticky-cart.is-visible {
                display: flex;
        }
}

/* Responsivo ------------------------------------------------------------ */
@media (max-width: 600px) {
        .sollu-container {
                padding: 12px;
        }
}



/* ====================================================================== */
/* Painel do cliente — Notificações                                        */
/* ====================================================================== */
.sollu-front .sollu-front-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
        flex-wrap: wrap;
}
.sollu-front .sollu-front-title {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
}
.sollu-front .sollu-front-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--sollu-primary);
        color: #fff;
        border: none;
        border-radius: var(--sollu-radius-sm);
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: transform .15s ease, opacity .15s ease;
}
.sollu-front .sollu-front-btn:hover { transform: translateY(-1px); opacity: .95; }
.sollu-front .sollu-front-btn-sm { padding: 6px 12px; font-size: 13px; }
.sollu-front .sollu-front-btn-ghost {
        background: transparent;
        color: var(--sollu-primary);
        border: 1px solid var(--sollu-border);
}
.sollu-front .sollu-front-empty,
.sollu-front .sollu-front-empty-state {
        text-align: center;
        color: var(--sollu-text-secondary);
        padding: 32px 16px;
}
.sollu-front .sollu-front-empty-icon {
        font-size: 42px;
        display: block;
        margin-bottom: 8px;
}
.sollu-front .sollu-notif-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
}
.sollu-front .sollu-notif-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        background: var(--sollu-card);
        border: 1px solid var(--sollu-border);
        border-radius: var(--sollu-radius);
        padding: 14px 16px;
        box-shadow: var(--sollu-shadow);
        cursor: pointer;
        transition: transform .15s ease;
}
.sollu-front .sollu-notif-item:hover { transform: translateY(-1px); }
.sollu-front .sollu-notif-item.is-read { opacity: .62; }
.sollu-front .sollu-notif-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--sollu-primary);
        margin-top: 6px;
        flex-shrink: 0;
}
.sollu-front .sollu-notif-item.is-read .sollu-notif-dot { background: var(--sollu-border); }
.sollu-front .sollu-notif-success .sollu-notif-dot { background: var(--sollu-success); }
.sollu-front .sollu-notif-warning .sollu-notif-dot { background: var(--sollu-warning); }
.sollu-front .sollu-notif-error .sollu-notif-dot { background: var(--sollu-danger); }
.sollu-front .sollu-notif-body {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
}
.sollu-front .sollu-notif-title { font-size: 15px; font-weight: 600; }
.sollu-front .sollu-notif-message { font-size: 14px; color: var(--sollu-text-secondary); }
.sollu-front .sollu-notif-time { font-size: 12px; color: var(--sollu-text-secondary); margin-top: 2px; }

/* ====================================================================== */
/* Gestão do carrinho — barra de frete grátis e avisos                     */
/* ====================================================================== */
.sollu-cart-manager {
        --sollu-cart-bar: var(--sollu-primary);
        margin: 0 0 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
}
.sollu-cart-progress {
        background: var(--sollu-card);
        border: 1px solid var(--sollu-border);
        border-radius: var(--sollu-radius);
        padding: 14px 16px;
        box-shadow: var(--sollu-shadow);
}
.sollu-cart-progress-label {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 8px;
}
.sollu-cart-progress-track {
        height: 10px;
        border-radius: 999px;
        background: var(--sollu-bg);
        overflow: hidden;
}
.sollu-cart-progress-fill {
        height: 100%;
        border-radius: 999px;
        background: var(--sollu-cart-bar);
        transition: width .4s ease;
}
.sollu-cart-notice {
        border-radius: var(--sollu-radius);
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 500;
}
.sollu-cart-notice-success { background: rgba(16,185,129,.12); color: #047857; }
.sollu-cart-notice-info { background: rgba(99,102,241,.10); color: #4338ca; }
.sollu-cart-gradient .sollu-cart-progress-fill { background: linear-gradient(90deg, var(--sollu-cart-bar), var(--sollu-success)); }
.sollu-cart-minimal .sollu-cart-progress { border: none; box-shadow: none; padding: 8px 0; }
.sollu-cart-card .sollu-cart-progress { border-radius: 20px; }



/* =========================================================================
 * v0.2 — Avisos de preço Varejo/Atacado (módulo Preços & Cargos).
 * ===================================================================== */
.sollu-price-notice {
        padding: 14px 18px;
        margin: 0 0 18px;
        border-radius: 12px;
        font-size: 15px;
        line-height: 1.5;
        box-shadow: 0 4px 12px rgba(0,0,0,.06);
        display: flex;
        align-items: center;
        gap: 10px;
}
.sollu-price-retail {
        background: #fff7ed;
        color: #9a3412;
        border: 1px solid #fed7aa;
}
.sollu-price-wholesale {
        background: #ecfdf5;
        color: #065f46;
        border: 1px solid #a7f3d0;
}
.sollu-price-vip {
        background: #eef2ff;
        color: #3730a3;
        border: 1px solid #c7d2fe;
}
.sollu-notice-xootix,
.sollu-notice-elementor { width: 100%; box-sizing: border-box; }
.sollu-notice-xootix .sollu-price-notice,
.sollu-notice-elementor .sollu-price-notice {
        font-size: 13px;
        padding: 10px 12px;
        margin: 0 0 8px;
}


/* ====================================================================== */
/* Carrinho — barra de frete grátis, avisos e cross-sell                  */
/* ====================================================================== */
.sollu-cart-progress {
        margin: 12px 0;
}
.sollu-cart-progress-label {
        font-size: 13px;
        color: var(--sollu-text-secondary);
        margin-bottom: 6px;
}
.sollu-cart-progress-track {
        height: 8px;
        background: var(--sollu-bg);
        border-radius: 20px;
        overflow: hidden;
}
.sollu-cart-progress-fill {
        height: 100%;
        background: var(--sollu-primary);
        border-radius: 20px;
        transition: width .4s ease;
}
.sollu-cart-notice {
        font-size: 13px;
        padding: 10px 12px;
        border-radius: var(--sollu-radius-sm);
        margin: 10px 0;
}
.sollu-cart-notice-info {
        background: #eef2ff;
        color: #3730a3;
        border: 1px solid #c7d2fe;
}
.sollu-cart-crosssell {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid var(--sollu-border);
}
.sollu-cart-crosssell h3 {
        font-size: 15px;
        font-weight: 600;
        margin: 0 0 12px;
        color: var(--sollu-text);
}
.sollu-crosssell-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
}
.sollu-crosssell-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
        border: 1px solid var(--sollu-border);
        border-radius: var(--sollu-radius-sm);
        padding: 10px;
        background: var(--sollu-card);
        text-align: center;
}
.sollu-crosssell-item img {
        width: 100%;
        height: auto;
        border-radius: 8px;
}
.sollu-crosssell-name {
        font-size: 13px;
        font-weight: 500;
        color: var(--sollu-text);
}
.sollu-crosssell-price {
        font-size: 13px;
        color: var(--sollu-primary);
        font-weight: 600;
}
.sollu-crosssell-item .button,
.sollu-crosssell-item .added_to_cart {
        font-size: 12px;
        border-radius: 8px;
}

/* ====================================================================== */
/* Painel do cliente (Minha Conta)                                        */
/* ====================================================================== */
.sollu-customer-panel {
        max-width: 960px;
        margin: 0 auto;
}
.sollu-cp-welcome {
        background: linear-gradient(135deg, var(--sollu-primary), var(--sollu-primary-dark));
        color: #fff;
        border-radius: var(--sollu-radius);
        padding: 20px 24px;
        margin-bottom: 20px;
        font-size: 16px;
}
.sollu-cp-welcome strong {
        font-weight: 700;
}
.sollu-cp-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
}
.sollu-cp-tab {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 16px;
        border-radius: 20px;
        background: var(--sollu-card);
        border: 1px solid var(--sollu-border);
        color: var(--sollu-text);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: background .15s ease, color .15s ease;
}
.sollu-cp-tab:hover {
        background: var(--sollu-bg);
}
.sollu-cp-tab.is-active {
        background: var(--sollu-primary);
        color: #fff;
        border-color: var(--sollu-primary);
}
.sollu-cp-loyalty {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: var(--sollu-card);
        border: 1px solid var(--sollu-border);
        border-radius: var(--sollu-radius);
        padding: 16px 20px;
        margin-bottom: 20px;
}
.sollu-cp-loyalty-label {
        font-size: 13px;
        color: var(--sollu-text-secondary);
}
.sollu-cp-loyalty-value {
        font-size: 22px;
        font-weight: 700;
        color: var(--sollu-primary);
}
/* Layout: cards (padrão) — abas em pílulas; list — abas empilhadas; minimal — enxuto */
.sollu-cp-list .sollu-cp-tabs {
        flex-direction: column;
}
.sollu-cp-list .sollu-cp-tab {
        border-radius: var(--sollu-radius-sm);
        justify-content: flex-start;
}
.sollu-cp-minimal .sollu-cp-welcome {
        background: none;
        color: var(--sollu-text);
        padding: 8px 0;
        border-bottom: 1px solid var(--sollu-border);
        border-radius: 0;
}
.sollu-cp-minimal .sollu-cp-tab {
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        padding: 8px 4px;
}
.sollu-cp-minimal .sollu-cp-tab.is-active {
        background: none;
        color: var(--sollu-primary);
        border-bottom-color: var(--sollu-primary);
}

/* ====================================================================== */
/* Atacado / Varejo (wholesale-retail)                                    */
/* ====================================================================== */
.sollu-wr-login-price a {
        display: inline-block;
        color: var(--sollu-primary);
        font-weight: 600;
        text-decoration: none;
        border: 1px dashed var(--sollu-primary);
        border-radius: var(--sollu-radius-sm);
        padding: 6px 12px;
        font-size: 13px;
}
.sollu-wr-login-price a:hover {
        background: #eef2ff;
}
.sollu-wr-qty-table {
        width: 100%;
        border-collapse: collapse;
        margin: 16px 0;
        font-size: 14px;
        border: 1px solid var(--sollu-border);
        border-radius: var(--sollu-radius-sm);
        overflow: hidden;
}
.sollu-wr-qty-table th,
.sollu-wr-qty-table td {
        padding: 10px 14px;
        text-align: left;
        border-bottom: 1px solid var(--sollu-border);
}
.sollu-wr-qty-table thead th {
        background: var(--sollu-bg);
        font-weight: 600;
        color: var(--sollu-text);
}
.sollu-wr-qty-table tbody tr:last-child td {
        border-bottom: none;
}
.sollu-wr-qty-table tbody tr:hover {
        background: #f9fafb;
}

/* v0.5 — visibilidade por dispositivo */
@media (min-width:1025px){.sollu-hide-desktop{display:none!important}}
@media (min-width:768px) and (max-width:1024px){.sollu-hide-tablet{display:none!important}}
@media (max-width:767px){.sollu-hide-mobile{display:none!important}}