/* ═══════════════════════════════════════════════════════════════
   cancao-verdadeira/assets/css/cv-public-componentes.css
   Projeto: Canção Verdadeira — Plataforma de letras musicais sertanejas
   Estilos dos componentes públicos do plugin que ficavam em blocos <style>
   dentro do PHP (refatoração fase 5, 24/09/2026 — plugin v2.32.0).
   Carregado DEPOIS dos CSS do tema (CV_Public::enqueue_componentes, prioridade
   30) para manter a mesma prioridade que os blocos tinham no corpo da página
   — alguns seletores (cv-btn, cv-auth-box, cv-share-btn) existem no tema.
═══════════════════════════════════════════════════════════════ */

/* ── Botão flutuante do WhatsApp (CV_Features::render_whatsapp) — antes em class-cv-features.php ── */
.cv-whatsapp-float {
    position: fixed;
    bottom: calc(var(--cv-player-h, 80px) + 20px);
    right: 24px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.cv-whatsapp-tooltip {
    background: rgba(59,36,24,0.45);
    border: 1px solid rgba(123,58,34,0.13);
    border-radius: 8px;
    color: #3B2418;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.cv-whatsapp-float:hover .cv-whatsapp-tooltip {
    opacity: 1;
    transform: translateX(0);
}
.cv-whatsapp-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25D366;
    color: #3B2418;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(37,211,102,.4);
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;
}
.cv-whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37,211,102,.5);
    color: #3B2418;
}
/* Anel de pulso */
.cv-whatsapp-btn::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #25D366;
    opacity: 0;
    animation: cv-wa-pulse 2s ease-out infinite;
}
.cv-whatsapp-btn::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid #25D366;
    opacity: 0;
    animation: cv-wa-pulse 2s ease-out infinite .4s;
}
@keyframes cv-wa-pulse {
    0%   { transform: scale(.9); opacity: .6; }
    100% { transform: scale(1.4); opacity: 0; }
}
/* Pausa no hover para não distrair quando o usuário interage */
.cv-whatsapp-btn:hover::before,
.cv-whatsapp-btn:hover::after {
    animation-play-state: paused;
}
@media (max-width: 480px) {
    .cv-whatsapp-float { right: 14px; bottom: calc(var(--cv-player-h, 80px) + 14px); }
    .cv-whatsapp-tooltip { display: none; }
}

/* ── Botões de compartilhar ([cv_share]) — antes em class-cv-mvp.php ── */
.cv-share-wrap { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.cv-share-label { font-size:13px; color:var(--cv-text-muted,#735442); font-weight:600; }
.cv-share-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.cv-share-btn {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    border-radius: 8px;
    border:      1px solid color-mix(in srgb, var(--share-color) 40%, transparent);
    background:  color-mix(in srgb, var(--share-color) 10%, transparent);
    color:       var(--share-color);
    font-size:   13px;
    font-weight: 600;
    padding:     6px 14px;
    text-decoration: none;
    transition:  background .2s, transform .1s;
    cursor:      pointer;
}
.cv-share-btn:hover {
    background:  color-mix(in srgb, var(--share-color) 20%, transparent);
    color:       var(--share-color);
    transform:   translateY(-1px);
}
.cv-share-icones .cv-share-btn { padding:8px 10px; border-radius:50%; width:38px; height:38px; justify-content:center; }
.cv-share-icon { font-size:16px; line-height:1; }
/* v2.44.0: botões oficiais (cor da marca + ícone branco) */
.cv-share-btn.cv-share-oficial { background:var(--share-color); color:#FFFFFF; border-color:transparent; }
.cv-share-btn.cv-share-oficial:hover { background:var(--share-color); color:#FFFFFF; filter:brightness(.9); }
.cv-share-icon { display:inline-flex; }

/* ── Formulários de login e cadastro ([cv_login_form] / [cv_register_form]) — antes em class-cv-auth.php ── */
.cv-auth-box { max-width:420px; margin:0 auto; background:#F8F0E4; border-radius:12px; padding:36px 32px; box-shadow:0 8px 32px rgba(123,58,34,0.12); }
.cv-auth-header { text-align:center; margin-bottom:28px; }
.cv-auth-icon { font-size:36px; display:block; margin-bottom:10px; }
.cv-auth-title { color:#3B2418; font-family:'Oswald',sans-serif; font-size:22px; margin:0 0 6px; }
.cv-auth-subtitle { color:#735442; font-size:14px; margin:0; }
.cv-auth-field { margin-bottom:18px; }
.cv-auth-field label { display:block; color:#6B4C3B; font-size:13px; font-weight:600; margin-bottom:6px; }
.cv-auth-field input[type="email"],
.cv-auth-field input[type="text"],
.cv-auth-field input[type="password"] { width:100%; padding:11px 14px; background:#FFFFFF; border:1px solid #EADBC6; border-radius:7px; color:#3B2418; font-size:15px; box-sizing:border-box; transition:border-color .2s; }
.cv-auth-field input:focus { border-color:#C9A27E; outline:none; box-shadow:0 0 0 2px rgba(242,165,26,0.2); }
.cv-auth-password-wrap { position:relative; }
.cv-auth-password-wrap input { padding-right:44px; }
.cv-auth-eye { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:16px; padding:4px; color:#735442; }
.cv-auth-remember { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; font-size:13px; color:#6B4C3B; }
.cv-auth-remember label { display:flex; align-items:center; gap:6px; cursor:pointer; }
.cv-auth-link { color:#7B3A22; text-decoration:none; }
.cv-auth-link:hover { color:#7B3A22; text-decoration:underline; }
.cv-btn { display:inline-block; padding:12px 24px; border-radius:7px; border:none; font-size:15px; font-weight:700; cursor:pointer; transition:all .2s; }
.cv-btn-primary { background:#F2A51A; color:#3B2418; }
.cv-btn-primary:hover { background:#F2A51A; }
.cv-btn-full { width:100%; text-align:center; }
.cv-auth-divider { text-align:center; color:#735442; margin:18px 0; font-size:13px; position:relative; }
.cv-auth-divider::before, .cv-auth-divider::after { content:''; position:absolute; top:50%; width:42%; height:1px; background:#F3E6D3; }
.cv-auth-divider::before { left:0; } .cv-auth-divider::after { right:0; }
.cv-auth-switch { text-align:center; color:#735442; font-size:14px; margin:0; }
.cv-auth-msg { padding:12px 16px; border-radius:7px; font-size:14px; margin-bottom:18px; }
.cv-auth-msg.success { background:#EAF6EA; color:#388038; border:1px solid #2d6a2d; }
.cv-auth-msg.error   { background:#F6EAEA; color:#D62C1A; border:1px solid #6a2d2d; }
.cv-auth-terms { font-size:12px; color:#735442; margin-top:14px; text-align:center; }
.cv-auth-strength { height:4px; border-radius:2px; margin-top:6px; transition:all .3s; background:#F3E6D3; }
.cv-auth-strength.weak   { background:#e74c3c; width:33%; }
.cv-auth-strength.medium { background:#F2A51A; width:66%; }
.cv-auth-strength.strong { background:#27ae60; width:100%; }

/* ── Edição de perfil ([cv_profile_form]) — antes em class-cv-profile-edit.php ── */
.cv-profile-box { max-width:560px; }
.cv-profile-avatar-section { text-align:center; margin-bottom:28px; }
.cv-profile-avatar { width:100px; height:100px; border-radius:50%; border:3px solid #C9A27E; object-fit:cover; }
.cv-profile-avatar-hint { color:#735442; font-size:12px; margin-top:8px; }
.cv-profile-section { background:#F8F0E4; border-radius:10px; padding:24px; margin-bottom:20px; }
.cv-profile-section-title { color:#3B2418; font-family:'Oswald',sans-serif; font-size:16px; margin:0 0 16px; }
.cv-profile-hint { color:#735442; font-size:13px; margin:-10px 0 14px; }
.cv-profile-field { margin-bottom:14px; }
.cv-profile-field label { display:block; color:#6B4C3B; font-size:13px; font-weight:600; margin-bottom:5px; }
.cv-profile-field input[type="text"],
.cv-profile-field input[type="email"],
.cv-profile-field input[type="password"],
.cv-profile-field select { width:100%; padding:10px 12px; background:#FFFFFF; border:1px solid #EADBC6; border-radius:6px; color:#3B2418; font-size:14px; box-sizing:border-box; }
.cv-profile-field input:focus,
.cv-profile-field select:focus { border-color:#C9A27E; outline:none; }
.cv-profile-msg { padding:10px 14px; border-radius:6px; font-size:13px; margin-bottom:14px; }
.cv-profile-msg.success { background:#EAF6EA; color:#388038; border:1px solid #2d6a2d; }
.cv-profile-msg.error   { background:#F6EAEA; color:#D62C1A; border:1px solid #6a2d2d; }
.cv-profile-danger { border:1px solid #DCB2B2; }
.cv-btn { display:inline-block; padding:10px 20px; border-radius:6px; border:none; font-size:14px; font-weight:700; cursor:pointer; transition:all .2s; }
.cv-btn-primary   { background:#F2A51A; color:#3B2418; }
.cv-btn-primary:hover { background:#F2A51A; }
.cv-btn-secondary { background:#F3E6D3; color:#3B2418; }
.cv-btn-secondary:hover { background:#F3E6D3; }
.cv-btn-danger    { background:#e74c3c; color:#3B2418; width:100%; text-align:center; }
.cv-btn-danger:hover { background:#c0392b; }
.cv-btn-outline-danger { background:transparent; color:#D62C1A; border:1px solid #e74c3c; }
.cv-btn-outline-danger:hover { background:#F6EAEA; }