/* ============================================================
   CASHSHARE — Frontend Styles
   ============================================================ */

/* ── Variáveis ─────────────────────────────────────────────── */
:root {
    --cs-green:       #16a34a;   /* verde principal */
    --cs-green-light: #dcfce7;
    --cs-green-dark:  #14532d;
    --cs-text-white:  #ffffff;
    --cs-radius:      6px;
    --cs-font:        inherit;
}

/* ============================================================
   BADGE nos cards de anúncio
   ============================================================ */

.cashshare-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    background:     var(--cs-green);
    color:          var(--cs-text-white);
    font-size:      0.72rem;
    font-weight:    700;
    line-height:    1;
    padding:        4px 9px;
    border-radius:  var(--cs-radius);
    white-space:    nowrap;
    vertical-align: middle;
    letter-spacing: 0.01em;
    box-shadow:     0 1px 3px rgba(22,163,74,.25);
    transition:     background 0.2s ease, transform 0.15s ease;
    cursor:         default;
}

.cashshare-badge:hover {
    background: var(--cs-green-dark);
    transform:  translateY(-1px);
}

.cashshare-badge--no-price {
    background: #059669;
    opacity: 0.85;
}

/* ── Ícone SVG dentro da badge ─────────────────────────────── */
.cashshare-badge .cashshare-coin-svg {
    width:  14px;
    height: 14px;
    fill:   currentColor;
    flex-shrink: 0;
}

.cashshare-badge__icon {
    display: flex;
    align-items: center;
}

.cashshare-badge__label {
    font-family: var(--cs-font);
}

/* ── Posicionamento dentro do card HivePress / ListingHive ─── */
.hp-listing .cashshare-badge,
.hp-listing__content .cashshare-badge,
[class*="hp-listing"] .cashshare-badge {
    display: inline-flex;
    margin:  4px 0 2px;
}

/* Badge na página única do anúncio — um pouco maior */
.cashshare-badge--page {
    font-size: 0.85rem;
    padding:   6px 12px;
    gap:       7px;
}

.cashshare-badge--page .cashshare-coin-svg {
    width:  16px;
    height: 16px;
}

/* ============================================================
   BANNER PÓS-COMPRA (thank you page)
   ============================================================ */

.cashshare-thankyou-banner {
    /*background:    var(--cs-green-light); */
    border:        2px solid var(--cs-green);
    border-radius: 04px;
    padding:       20px 24px;
    margin:        24px 0;
}

.cashshare-thankyou-inner {
    display:     flex;
    align-items: center;
    gap:         16px;
    flex-wrap:   wrap;
}

.cashshare-thankyou-banner strong {
    font-size:   1.1rem;
    font-family: Poppins, sans-serif;
    color:       var(--cs-green-dark);
    display:     block;
}

.cashshare-thankyou-banner p {
    margin: 4px 0 0;
    color:  #374151;
}

.cashshare-coin-icon {
    font-size: 2rem;
    font-family: Poppins, sans-serif;
}

/* ============================================================
   BOTÃO GLOBAL
   ============================================================ */

.cashshare-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    background:      var(--cs-green);
    color:           var(--cs-text-white) !important;
    border:          none;
    border-radius:   var(--cs-radius);
    padding:         10px 20px;
    font-size:       0.9rem;
    font-weight:     700;
    cursor:          pointer;
    text-decoration: none;
    transition:      background 0.2s, transform 0.15s;
    white-space:     nowrap;
}

.cashshare-btn:hover {
    background: var(--cs-green-dark);
    transform:  translateY(-1px);
    color:      var(--cs-text-white) !important;
}

.cashshare-btn:active {
    transform: translateY(0);
}

.cashshare-btn[disabled],
.cashshare-btn.loading {
    opacity: 0.65;
    pointer-events: none;
}

/* ============================================================
   PAINEL DO USUÁRIO
   ============================================================ */

.cashshare-painel {
    max-width:     680px;
    margin:        0 auto;
    font-family:   var(--cs-font);
}

/* ── Card de saldo ─────────────────────────────────────────── */
.cashshare-painel__saldo {
    display:       flex;
    align-items:   center;
    gap:           16px;
    background:    var(--cs-green);
    color:         #fff;
    border-radius: 12px;
    padding:       24px 28px;
    margin-bottom: 28px;
    box-shadow:    0 4px 16px rgba(22,163,74,.3);
}

.cashshare-painel__saldo-icon svg {
    width:  40px;
    height: 40px;
    fill:   rgba(255,255,255,.85);
}

.cashshare-painel__saldo-valor {
    font-size:   2rem;
    font-weight: 800;
    line-height: 1;
}

.cashshare-painel__saldo-label {
    font-size: 0.85rem;
    opacity:   0.85;
    margin-top: 3px;
}

/* ── Formulário de envio ───────────────────────────────────── */
.cashshare-painel__envio {
    background:    #fff;
    border:        1px solid #e5e7eb;
    border-radius: 12px;
    padding:       24px 28px;
    margin-bottom: 28px;
}

.cashshare-painel__envio h3,
.cashshare-painel__historico h3 {
    font-size:     1.1rem;
    font-weight:   700;
    margin:        0 0 10px;
    color:         #111827;
}

.cashshare-painel__envio-info {
    color:         #6b7280;
    font-size:     0.85rem;
    margin:        0 0 20px;
}

.cashshare-form__group {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    margin-bottom:  16px;
}

.cashshare-form__group label {
    font-size:   0.82rem;
    font-weight: 600;
    color:       #374151;
}

.cashshare-form__group input {
    border:        1px solid #d1d5db;
    border-radius: 6px;
    padding:       10px 12px;
    font-size:     0.95rem;
    transition:    border-color 0.2s;
    width:         100%;
    box-sizing:    border-box;
}

.cashshare-form__group input:focus {
    outline:       none;
    border-color:  var(--cs-green);
    box-shadow:    0 0 0 3px rgba(22,163,74,.15);
}

/* Feedback de erro/sucesso */
.cashshare-form__feedback {
    min-height:    24px;
    font-size:     0.87rem;
    margin-bottom: 12px;
    border-radius: 6px;
    padding:       0;
}

.cashshare-form__feedback.cs-success {
    color:      var(--cs-green-dark);
    background: var(--cs-green-light);
    padding:    10px 14px;
}

.cashshare-form__feedback.cs-error {
    color:      #991b1b;
    background: #fee2e2;
    padding:    10px 14px;
}

/* ── Histórico ─────────────────────────────────────────────── */
.cashshare-painel__historico {
    background:    #fff;
    border:        1px solid #e5e7eb;
    border-radius: 12px;
    padding:       24px 28px;
}

.cashshare-historico-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.cashshare-historico-item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       10px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size:     0.88rem;
}

.cashshare-historico-item:last-child {
    border-bottom: none;
}

.cs-hist-tipo {
    flex:       0 0 80px;
    font-weight: 600;
    color:      #374151;
}

.cs-hist-valor {
    font-weight: 700;
    flex:        1;
}

.cs-credit { color: var(--cs-green); }
.cs-debit  { color: #dc2626; }

.cs-hist-status {
    font-size:     0.78rem;
    padding:       2px 8px;
    border-radius: 99px;
    font-weight:   600;
}

.cs-hist-status--aprovado  { background: var(--cs-green-light); color: var(--cs-green-dark); }
.cs-hist-status--pendente  { background: #fef9c3; color: #713f12; }
.cs-hist-status--recusado  { background: #fee2e2; color: #991b1b; }

.cs-hist-data {
    color:     #9ca3af;
    font-size: 0.8rem;
    flex:      0 0 70px;
    text-align: right;
}



/* ------------ Histórico Paginação -------------------------------- */


.cs-paginacao {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.cs-paginacao__item {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    background: #f5f5f5;
}
.cs-paginacao__item--atual {
    background: #2a9d8f;
    color: #fff;
    border-color: #2a9d8f;
}







/* ── Responsivo ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .cashshare-thankyou-inner { flex-direction: column; }
    .cashshare-painel__saldo  { flex-direction: column; text-align: center; }
    .cashshare-historico-item { flex-wrap: wrap; }
    .cs-hist-data             { flex: 0 0 100%; text-align: left; }
}

/* ── Cards de saldo ──────────────────────────────────────────── */
.cashshare-saldo-cards {
    display:        grid;
    grid-template-columns: 1fr 1fr;
    gap:            12px;
    margin-bottom:  24px;
}

.cashshare-saldo-card {
    border-radius:  10px;
    padding:        20px;
    text-align:     center;
}

.cashshare-saldo-card--disponivel {
    background: #16a34a;
    color:      #fff;
}

.cashshare-saldo-card--pendente {
    background: #fef9c3;
    color:      #713f12;
    border:     1px solid #fde68a;
}

.cashshare-saldo-card__label {
    font-size:    0.78rem;
    font-weight:  600;
    opacity:      0.85;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cashshare-saldo-card__valor {
    font-size:   1.6rem;
    font-weight: 800;
    line-height: 1;
}

/* ── Mensagem de falta ───────────────────────────────────────── */
.cashshare-painel__falta {
    display:        flex;
    align-items:    center;
    gap:            16px;
    flex-wrap:      wrap;
    background:     #f0fdf4;
    border:         1px solid #bbf7d0;
    border-radius:  10px;
    padding:        20px;
    margin-bottom:  24px;
}

.cashshare-painel__falta svg {
    width:      32px;
    height:     32px;
    fill:       #16a34a;
    flex-shrink: 0;
}

.cashshare-painel__falta strong {
    display:     block;
    color:       #14532d;
    font-size:   1rem;
    margin-bottom: 4px;
}

.cashshare-painel__falta p {
    color:      #166534;
    font-size:  0.85rem;
    margin:     0;
}

@media (max-width: 480px) {
    .cashshare-saldo-cards { grid-template-columns: 1fr; }
    .cashshare-painel__falta { flex-direction: column; text-align: center; }
}

/* ── Banner pós-compra ───────────────────────────────────────── */
.cashshare-thankyou-banner {
    background:    #16a34a;
    border-radius: 10px;
    padding:       20px 24px;
    margin:        24px 0;
}

.cashshare-thankyou-inner {
    display:     flex;
    align-items: center;
    gap:         16px;
    flex-wrap:   wrap;
}

.cashshare-thankyou-emoji {
    font-size:   2rem;
    flex-shrink: 0;
}

.cashshare-thankyou-text {
    flex: 1;
}

.cashshare-thankyou-text strong {
    font-size:   1.1rem;
    font-weight: 700;
    color:       #fff;
    display:     block;
}

.cashshare-thankyou-btn {
    display:         inline-block;
    background:      #fff;
    color:           #16a34a !important;
    padding:         10px 22px;
    border-radius:   6px;
    text-decoration: none !important;
    font-weight:     700;
    font-size:       0.95rem;
    white-space:     nowrap;
    flex-shrink:     0;
    transition:      opacity 0.2s;
}

.cashshare-thankyou-btn:hover {
    opacity: 0.9;
}

@media (max-width: 480px) {
    .cashshare-thankyou-inner { flex-direction: column; text-align: center; }
    .cashshare-thankyou-btn   { width: 100%; text-align: center; }
}

/* ── Histórico vazio ─────────────────────────────────────────── */
.cashshare-historico-vazio {
    display:        flex;
    align-items:    center;
    gap:            14px;
    padding:        20px;
    background:     #f9fafb;
    border-radius:  8px;
    color:          #6b7280;
}

.cashshare-historico-vazio svg {
    width:       28px;
    height:      28px;
    fill:        #d1d5db;
    flex-shrink: 0;
}

.cashshare-historico-vazio p {
    margin:      0;
    font-size:   0.9rem;
    line-height: 1.5;
}

.cashshare-historico-vazio small {
    font-size: 0.8rem;
    color:     #9ca3af;
}