/* 
 * ==========================================
 * HEADER BANNER & PERFIL DO VENDEDOR
 * ==========================================
 */
.header-banner { background: linear-gradient(135deg, #e60000 0%, #990000 100%); height: 160px; position: relative; display: flex; justify-content: flex-end; align-items: flex-start; padding: 20px 24px; border-bottom: 4px solid var(--honda-red-hover); }
.dealership-badge { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border: 1px solid rgba(230, 0, 0, 0.3); padding: 0 18px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; text-decoration: none; font-weight: 800; color: var(--text-main); font-size: 0.85rem; box-shadow: 0 4px 15px rgba(0,0,0,0.15); z-index: 2; transition: var(--transition-smooth); }
@media (hover: hover) { .dealership-badge:hover { border-color: var(--honda-red); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(230, 0, 0, 0.25); } }
.dealership-badge span { color: var(--honda-red); }

.profile-container { max-width: 1100px; margin: -60px auto 40px; padding: 0 20px; position: relative; z-index: 10; animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.profile-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 24px; padding: 32px 24px 28px; box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.profile-info { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.profile-avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin-top: -75px; border: 5px solid var(--honda-red); box-shadow: 0 8px 20px rgba(230, 0, 0, 0.2); background: #ffffff; z-index: 5; transition: transform var(--transition-smooth); }
@media (hover: hover) { .profile-avatar:hover { transform: scale(1.05) rotate(2deg); } }
.profile-details { display: flex; flex-direction: column; align-items: center; max-width: 100%; }

.profile-details h1 { 
    display: inline-flex; 
    align-items: center; 
    font-size: 1.7rem; 
    font-weight: 800; 
    gap: 8px; 
    color: var(--text-main); 
    letter-spacing: -0.5px; 
    margin-bottom: 4px; 
    word-break: normal;
    white-space: nowrap;
}

.verified-icon { color: #0ea5e9; font-size: 1.3rem; }
.profile-details .role-text { display: flex; gap: 6px; color: var(--honda-red); font-size: 0.85rem; font-weight: 800; text-transform: uppercase; margin-top: 4px; text-wrap: balance; }
.profile-details .bio-text { color: var(--text-muted); font-size: 0.95rem; max-width: 460px; margin-top: 10px; line-height: 1.5; font-weight: 500; text-wrap: balance; }
.profile-actions { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; flex-wrap: wrap; }
.btn-social { width: 50px; height: 50px; border-radius: 50%; background-color: #f1f5f9; border: 1px solid var(--card-border); color: var(--text-main); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 1.3rem; transition: var(--transition-smooth); }
@media (hover: hover) { .btn-social:hover { border-color: var(--honda-red); color: white; background-color: var(--honda-red); transform: translateY(-3px) scale(1.05); } }

@media (min-width: 769px) {
    .profile-card { flex-direction: row; justify-content: space-between; padding: 32px 40px; }
    .profile-info { flex-direction: row; justify-content: flex-start; text-align: left; width: auto; gap: 32px; }
    .profile-avatar { margin-top: 0; }
    .profile-details, .profile-details h1, .profile-details .role-text, .profile-details .bio-text { align-items: flex-start; text-align: left; justify-content: flex-start; }
    .profile-actions { width: auto; justify-content: flex-end; margin-left: auto; }
}