/* ============================================================
   PetsBook — Estilos compartilhados de formulários
   Compatíveis com qualquer tema ([data-tema]) já que usam
   variáveis CSS definidas em config/temas_css.php.
   ============================================================ */

.pb-form-card {
    max-width: 920px;
    margin: 1.5rem auto;
    background: var(--pb-card-bg, #fff);
    border: 1px solid var(--pb-border, #e5e7eb);
    border-radius: 14px;
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.pb-form-card h1,
.pb-form-card h2 {
    margin: 0 0 .25rem;
    color: var(--pb-text, #1f2937);
    font-size: 1.45rem;
}
.pb-form-card .pb-form-sub {
    color: var(--pb-text-muted, #6b7280);
    margin: 0 0 1.25rem;
    font-size: .92rem;
}

.pb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pb-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.pb-grid-cep { display: grid; grid-template-columns: 180px 1fr 130px; gap: 1rem; }
.pb-grid-loc { display: grid; grid-template-columns: 1fr 1fr 100px; gap: 1rem; }

.pb-field { display: flex; flex-direction: column; gap: .35rem; }
.pb-field label {
    font-size: .85rem; font-weight: 600;
    color: var(--pb-text, #1f2937);
}
.pb-field label .req { color: #dc2626; margin-left: 2px; }
.pb-field .pb-help {
    font-size: .78rem; color: var(--pb-text-muted, #6b7280);
}
.pb-field-error {
    color: #dc2626; font-size: .78rem; margin-top: .15rem;
}

.pb-input,
.pb-select,
.pb-textarea {
    width: 100%;
    padding: .6rem .8rem;
    background: var(--pb-input-bg, #fff);
    color: var(--pb-text, #1f2937);
    border: 1px solid var(--pb-border, #d1d5db);
    border-radius: 8px;
    font-size: .95rem;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.pb-textarea { min-height: 96px; resize: vertical; }
.pb-input:focus,
.pb-select:focus,
.pb-textarea:focus {
    outline: none;
    border-color: var(--pb-primary, #006089);
    box-shadow: 0 0 0 3px rgba(0,96,137,.15);
}
.pb-input.is-invalid,
.pb-select.is-invalid,
.pb-textarea.is-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}
.pb-input.is-loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23006089' stroke-width='3'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    padding-right: 2.2rem;
}

.pb-form-actions {
    display: flex; gap: .75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--pb-border, #e5e7eb);
}
.pb-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1.1rem;
    border-radius: 8px;
    font-weight: 600; font-size: .95rem;
    cursor: pointer; border: 1px solid transparent;
    text-decoration: none;
    transition: filter .15s, transform .05s;
}
.pb-btn:active { transform: translateY(1px); }
.pb-btn-primary {
    background: var(--pb-primary, #006089); color: #fff;
}
.pb-btn-primary:hover { filter: brightness(1.08); }
.pb-btn-ghost {
    background: transparent;
    border-color: var(--pb-border, #d1d5db);
    color: var(--pb-text, #1f2937);
}
.pb-btn-ghost:hover { background: rgba(0,0,0,.04); }
.pb-btn-danger {
    background: #dc2626; color: #fff;
}

.pb-alert {
    padding: .75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: .92rem;
    display: flex; align-items: center; gap: .55rem;
}
.pb-alert i { font-size: 1.05rem; }
.pb-alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.pb-alert-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.pb-alert-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

.pb-photo-preview {
    width: 140px; height: 140px;
    border-radius: 12px;
    border: 2px dashed var(--pb-border, #d1d5db);
    background: var(--pb-input-bg, #f9fafb) center / cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    color: var(--pb-text-muted, #9ca3af);
    overflow: hidden;
}
.pb-photo-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ====== RESPONSIVO ====== */
@media (max-width: 768px) {
    .pb-grid-2,
    .pb-grid-3,
    .pb-grid-cep,
    .pb-grid-loc { grid-template-columns: 1fr; }
    .pb-form-card { margin: 1rem .5rem; padding: 1.25rem; }
    .pb-form-actions { flex-direction: column-reverse; }
    .pb-form-actions .pb-btn { width: 100%; justify-content: center; }
}