/* ── CPF Search v2.1 – Frontend ──────────────────────────────────────────── */

:root {
    --cpf-primary:        #2563eb;
    --cpf-primary-dark:   #1d4ed8;
    --cpf-bg:             #ffffff;
    --cpf-border:         #e2e8f0;
    --cpf-text:           #1e293b;
    --cpf-radius:         12px;
    --cpf-radius-sm:      8px;
    --cpf-success-bg:     #f0fdf4;
    --cpf-success-border: #bbf7d0;
    --cpf-success-text:   #166534;
    --cpf-error-bg:       #fef2f2;
    --cpf-error-border:   #fecaca;
    --cpf-error-text:     #991b1b;
    --cpf-ease:           cubic-bezier(.4,0,.2,1);
}

.cpf-search-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 520px;
    margin: 0 auto;
}

/* ── Input ───────────────────────────────────────────────────────────────── */
.cpf-search-input-group { display:flex; gap:10px; align-items:stretch; }

.cpf-search-input {
    flex: 1;
    padding: 14px 18px;
    font-size: 16px;
    border: 2px solid var(--cpf-border);
    border-radius: var(--cpf-radius-sm);
    background: var(--cpf-bg);
    color: var(--cpf-text);
    outline: none;
    letter-spacing: .5px;
    transition: border-color .2s var(--cpf-ease), box-shadow .2s var(--cpf-ease);
}
.cpf-search-input::placeholder { color:#94a3b8; }
.cpf-search-input:focus {
    border-color: var(--cpf-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* ── Botão ───────────────────────────────────────────────────────────────── */
.cpf-search-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 22px;
    background: var(--cpf-primary);
    color: #fff;
    border: none;
    border-radius: var(--cpf-radius-sm);
    font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: filter .2s var(--cpf-ease), transform .15s var(--cpf-ease), box-shadow .2s var(--cpf-ease);
}
.cpf-search-btn:hover  { filter:brightness(.9); transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.18); }
.cpf-search-btn:active { transform:translateY(0); }
.cpf-search-btn-icon svg { width:16px; height:16px; flex-shrink:0; }
.cpf-search-btn.loading .cpf-search-btn-text { opacity:.5; }
.cpf-search-btn.loading .cpf-search-btn-icon svg { animation:cpf-spin .7s linear infinite; }
@keyframes cpf-spin { to { transform:rotate(360deg); } }

/* ── Animação coração ────────────────────────────────────────────────────── */
.cpf-heart-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    gap: 14px;
}

.cpf-heart-svg {
    width: 60px;
    height: 60px;
    overflow: visible;
    animation: cpf-heart-beat 0.9s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(239,68,68,.4));
}

.cpf-heart-path {
    fill: #ef4444;
    stroke: #dc2626;
    stroke-width: 2;
    transform-origin: 50px 55px;
}

@keyframes cpf-heart-beat {
    0%   { transform: scale(1);    }
    14%  { transform: scale(1.22); }
    28%  { transform: scale(1);    }
    42%  { transform: scale(1.14); }
    70%  { transform: scale(1);    }
    100% { transform: scale(1);    }
}

.cpf-heart-text {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
    margin: 0;
    animation: cpf-pulse-text 1.4s ease-in-out infinite;
}
@keyframes cpf-pulse-text {
    0%,100% { opacity:.6; }
    50%      { opacity:1;  }
}

/* ── Card resultado ──────────────────────────────────────────────────────── */
.cpf-search-result { margin-top: 18px; }

.cpf-result-card {
    padding: 20px 24px;
    border: 1.5px solid var(--cpf-success-border);
    background: var(--cpf-success-bg);
    border-radius: var(--cpf-radius);
    animation: cpf-slide-in .32s var(--cpf-ease);
}
.cpf-result-card.error { border-color:var(--cpf-error-border); background:var(--cpf-error-bg); }

@keyframes cpf-slide-in {
    from { opacity:0; transform:translateY(10px) scale(.98); }
    to   { opacity:1; transform:translateY(0)    scale(1);   }
}

.cpf-result-icon    { font-size:30px; display:block; margin-bottom:10px; }
.cpf-result-name    { font-size:22px; font-weight:700; color:var(--cpf-success-text); margin:0 0 6px; line-height:1.2; }
.cpf-result-message { font-size:15px; color:var(--cpf-success-text); margin:0; line-height:1.6; }
.cpf-result-card.error .cpf-result-message { color:var(--cpf-error-text); font-weight:500; }
.cpf-result-card.error .cpf-result-name    { display:none; }

/* ── Imagem de compartilhamento ──────────────────────────────────────────── */
.cpf-share-image-wrap {
    margin: 0 0 14px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--cpf-success-border);
}
.cpf-share-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
}

/* ── Bloco compartilhamento ──────────────────────────────────────────────── */
.cpf-share-block {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--cpf-success-border);
}

.cpf-share-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cpf-success-text);
    opacity: .75;
    margin: 0 0 8px;
}

.cpf-share-textarea {
    width: 100%; box-sizing: border-box;
    padding: 10px 14px;
    font-size: 14px; line-height: 1.55; font-family: inherit;
    border: 1.5px solid var(--cpf-success-border);
    border-radius: 8px;
    background: rgba(255,255,255,.65);
    color: var(--cpf-success-text);
    resize: vertical; outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.cpf-share-textarea:focus {
    border-color: var(--cpf-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.cpf-share-actions {
    display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}

.cpf-share-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px;
    border: none; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: filter .18s, transform .15s, box-shadow .18s;
}
.cpf-share-btn:hover  { filter:brightness(.9); transform:translateY(-1px); }
.cpf-share-btn:active { transform:translateY(0); }
.cpf-share-btn svg    { width:15px; height:15px; flex-shrink:0; }

.cpf-share-copy {
    background: rgba(255,255,255,.85);
    color: var(--cpf-success-text);
    border: 1.5px solid var(--cpf-success-border) !important;
}
.cpf-share-fb {
    background: #1877f2;
    color: #fff;
}
.cpf-share-fb:hover  { background:#1464d0; filter:none; }
.cpf-share-li {
    background: #0a66c2;
    color: #fff;
}
.cpf-share-li:hover  { background:#084d90; filter:none; }

.cpf-share-note {
    font-size: 12px;
    color: var(--cpf-success-text);
    opacity: .7;
    margin: 10px 0 0;
    line-height: 1.5;
}

/* ── Temas ───────────────────────────────────────────────────────────────── */
.cpf-search-theme-dark {
    --cpf-bg:             #1e293b;
    --cpf-border:         #334155;
    --cpf-text:           #f1f5f9;
    --cpf-success-bg:     #052e16;
    --cpf-success-text:   #4ade80;
    --cpf-success-border: #166534;
    --cpf-error-bg:       #1c0606;
    --cpf-error-text:     #f87171;
    --cpf-error-border:   #7f1d1d;
}
.cpf-search-theme-dark .cpf-search-input::placeholder { color:#475569; }
.cpf-search-theme-dark .cpf-share-textarea { background:rgba(0,0,0,.25); }
.cpf-search-theme-dark .cpf-share-copy { background:rgba(255,255,255,.08); color:#4ade80; }

.cpf-search-theme-minimal .cpf-search-input { border-width:0 0 2px 0; border-radius:0; padding-left:0; background:transparent; }
.cpf-search-theme-minimal .cpf-search-btn   { background:transparent; color:var(--cpf-primary); border:2px solid var(--cpf-primary); }
.cpf-search-theme-minimal .cpf-search-btn:hover { background:var(--cpf-primary); color:#fff; filter:none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:480px) {
    .cpf-search-input-group, .cpf-share-actions { flex-direction:column; }
    .cpf-search-btn, .cpf-share-btn             { justify-content:center; }
}