/* ===== resources/views/site/user/profile.blade.php ===== */
/* ====== PÁGINA DE PERFIL DE USUÁRIO ====== */

        .profile-avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid var(--sulsul-purple);
        }

        .profile-name {
            font-family: 'Oswald', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--sulsul-light-gray);
            margin: 0;
        }

        .social-icons {
            display: flex;
            gap: 0.8rem;
        }
        .social-icons a {
            color: var(--sulsul-purple);
            font-size: 1.5rem;
            transition: color 0.2s ease;
        }
        .social-icons a:hover {
            color: var(--sulsul-green);
        }

        .container-narrow-profile {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
            border-bottom: 2px solid var(--sulsul-purple);
        }

        .container-narrow-profile-border-none {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
        }

        .profile-subtitle {
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--sulsul-green);
            letter-spacing: 2px;
            margin: 0.25rem 0;
        }

        .profile-location {
            font-family: 'Oswald', sans-serif;
            font-weight: 150;
            letter-spacing: 0.5px;
            color: var(--sulsul-light-gray);
            margin-bottom: 1rem;
        }

        .profile-bio {
            font-family: 'Oswald', sans-serif;
            color: var(--sulsul-title-gray);
            font-size: 0.9rem;
        }

        /* --- Estatísticas do Perfil --- */
        .stat-item-profile {
            display: flex;
            align-items-baseline;
            gap: 0.5rem;
            justify-content: center; /* Alinha no centro em telas menores */
            color: var(--sulsul-green);
        }
        @media (min-width: 768px) {
            .stat-item-profile {
                justify-content: flex-start; /* Alinha à esquerda em telas maiores */
            }
        }

        .stat-number-profile {
            font-family: 'Oswald', sans-serif;
            font-size: 4rem;
            font-weight: 700;
            color: var(--sulsul-green);
            line-height: 1;
        }
        .stat-label-profile {
            font-family: 'Oswald', sans-serif;
            font-size: 1rem;
            color: var(--sulsul-green);
            text-transform: uppercase;
            padding-top: 10px;
            line-height: 1;
        }

        .hide-data-link {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            color: var(--sulsul-purple);
            text-decoration: none;
            font-size: 0.9rem;
        }

        /* --- Link "Add More" --- */
        .add-more-link {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            color: var(--sulsul-purple);
            text-decoration: none;
            font-weight: 700;
        }

        /* --- Linha Separadora --- */
        .hr-section-sep {
            display: block;
            height: 2px;
            background-color: var(--sulsul-purple);
            border: 0;
            opacity: 1;
            margin: 40px 0;
        }

        /* --- Efeito Hover para o Avatar do Usuário --- */

        /* 1. O contêiner principal que servirá de referência para o overlay */
        .avatar-container {
            position: relative; /* Essencial para posicionar o overlay */
            display: inline-block; /* Faz o contêiner ter o tamanho da imagem */
            cursor: pointer;
        }

        /* 2. O overlay que contém os ícones */
        .avatar-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%; /* Garante que o overlay seja circular como a imagem */
            background-color: rgba(0, 0, 0, 0.6); /* Fundo escuro semi-transparente */

            /* Centraliza os ícones dentro do overlay */
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px; /* Espaçamento entre os ícones */

            /* Esconde o overlay por padrão */
            opacity: 0;
            visibility: hidden;

            /* Efeito de transição suave */
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }

        /* 3. A MÁGICA: Revela o overlay quando o mouse passa sobre o contêiner */
        .avatar-container:hover .avatar-overlay {
            opacity: 1;
            visibility: visible;
        }

        /* 4. (Opcional) Adiciona um efeito na imagem para destacar os ícones */
        .avatar-container:hover .profile-avatar {
            filter: brightness(0.7);
        }

        /* 5. Estilo dos ícones dentro do overlay */
        .avatar-action-icon {
            width: 35px;
            height: 35px;
            text-align: center;
            border-radius: 10%;
            color: var(--sulsul-rose-oss);
            background-color: var(--sulsul-purple);
            font-size: 20px;
            text-decoration: none;
            transition: transform 0.2s ease;
        }
        .avatar-action-icon:hover {
            transform: scale(1.1);
        }

/* ====== PRODUCER (alinhado ao modelo da Campanha) ====== */

        /* Botão sobreposto no banner — mesmo padrão da campanha */
        .btn-visit-website-overlay{
            position: absolute;
            top: 2rem;
            right: 2rem;
            background-color: var(--sulsul-purple);
            color: var(--sulsul-light-gray);
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.9rem;
            padding: 0.8rem 1.5rem;
            border: 2px solid var(--sulsul-title-gray);
            text-decoration: none;
            transition: all .2s ease;
            z-index: 3;
        }
        .btn-visit-website-overlay:hover{
            background-color: var(--sulsul-title-gray);
            color: var(--sulsul-purple);
        }

        /* Banner (full-width) */
        .producer-hero-image{
            position: relative;
            min-height: 240px;
        }
        .producer-hero-image > img{
            display: block;
            width: 100%;
            height: auto;
        }

        /* Faixa de título abaixo do banner, com largura limitada */
        .producer-title-section{
            /* background-color: var(--sulsul-purple); */
            color: var(--sulsul-light-gray);
            padding: 2.5rem 1rem;
            /* border-bottom: 2px solid var(--sulsul-purple); */
        }

        /* Contêiner estreito (800px) para o título e metadados */
        .container-narrow-producer{
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
        }

        /* Tipografia do título/subtítulo/local */
        .producer-name{
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            font-size: 3rem;
            line-height: 1.05;
            letter-spacing: 2px;
            color: var(--sulsul-title-gray);
            margin-bottom: .25rem;
        }
        .producer-subtitle{
            font-family: 'Oswald', sans-serif;
            font-size: 1.1rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--sulsul-purple);
            margin-bottom: .25rem;
        }
        .producer-location{
            font-family: 'Oswald', sans-serif;
            /* font-weight: 700; */
            color: var(--sulsul-light-gray);
            margin: 0;
        }

        /* Elementos flutuantes ancorados ao banner e invadindo a faixa de título */
        .producer-logo-float,
        .btn-plus-float{
            position: absolute;
            z-index: 4;
        }
        .producer-logo-float{
            bottom: -40px;           /* invade a faixa */
            right: 10%;
            width: 150px; height:150px;
            border-radius: 50%;
            border: 4px solid #000;
            object-fit: cover;
            background: #000;
        }
        .btn-plus-float{
            bottom: -10px;           /* acompanha a borda do logo */
            right: calc(10% + 125px);
            transform: translateY(50%);
            width: 50px; height: 50px;
            border-radius: 50%;
            background-color: var(--sulsul-red);
            color: #fff;
            border: 2px solid #000;
            font-size: 2rem; line-height: 1;
            display: flex; align-items: center; justify-content: center;
        }

        /* ====== Seções já existentes (ajustadas para conviver com o novo hero) ====== */

        .producer-stats{
            padding-top: 100px; /* respiro por causa do logo flutuante */
        }

        .upcoming-events-list{

        }

        .stat-item-producer{
            display: flex; align-items: flex-end; gap: 1rem;
        }
        .stat-prefix{
            font-family: 'Oswald', sans-serif;
            font-size: 1.5rem; font-weight: 700;
            color: var(--sulsul-title-gray);
            text-align: end;
        }
        .stat-number-producer{
            font-family: 'Oswald', sans-serif;
            font-size: 6rem; font-weight: 700;
            color: var(--sulsul-green); line-height: 1;
        }
        .stat-label-producer{
            font-family: 'Oswald', sans-serif;
            font-size: 1.2rem; color: var(--sulsul-title-gray);
            text-transform: uppercase;
            line-height: 1.2;
        }

        .section-title-small{
            font-family: 'Oswald', sans-serif;
            font-size: 1.2rem;
            color: var(--sulsul-green);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 700;
            padding-bottom: .5rem;
        }

        .upcoming-event-item{
            display: flex;
            align-items: center;
            gap: 1.5rem;
            border: 2px solid var(--sulsul-purple);
        }
        .date-box{
            background-color: var(--sulsul-purple); color:#fff;
            font-family:'Oswald',sans-serif; text-align:center; padding:.5rem; min-width:70px;
        }
        .date-box .day{ display:block; font-size:2.5rem; font-weight:700; line-height:1; }
        .date-box .month{ display:block; font-size:1rem; font-weight:700; text-transform:uppercase; }
        .upcoming-event-item .info h3{
            font-family:'Oswald',sans-serif; font-size:1.5rem; font-weight:700; color:var(--sulsul-title-gray); margin:0;
        }
        .upcoming-event-item .info p{
            font-family:'Montserrat',sans-serif;
            color:var(--sulsul-light-gray);
            margin:0;
        }


        .events-conducted-carousel .caption{
            font-family:'Oswald',sans-serif;
            color:var(--sulsul-light-gray);
            margin-top:1rem; font-weight:700;
        }

        .connections-list{ display:flex; flex-wrap:wrap; gap:1rem; }
        .connections-list img{ width:80px; height:80px; border:3px solid var(--sulsul-gray); }

        /* Utilitário geral (se não existir): container estreito padrão */
        .container-narrow{
            max-width: 800px;
            margin-left: auto; margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, .75rem);
            padding-left: var(--bs-gutter-x, .75rem);
        }

        .hr-section-sep{
            display:block;
            height: 2px;
            background-color: var(--sulsul-purple);
            border: 0;
            opacity: 1;
            margin: 60px 0 0;  /* 2rem de espaço ACIMA do hr */
        }

        /* Responsivo */
        @media (max-width: 767px){
            .producer-name{ font-size: 2rem; }
            .producer-subtitle{ font-size: 1rem; }
            .producer-logo-float{ width:100px; height:100px; bottom:-30px; right:6%; }
            .btn-plus-float{ right: calc(6% + 80px); width:40px; height:40px; font-size:1.6rem; }
            .stat-number-producer{ font-size: 4rem; }
            .stat-item-producer{ justify-content:center; flex-direction:column; align-items:center; text-align:center; }
            .stat-label-producer{ padding-bottom:0; }
        }

/* ===== resources/views/site/user/register.blade.php ===== */
.avatar-img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }
        .avatar-uploader.has-image input[type="file"] { display:none; } /* esconde input */
        .loader-backdrop {
            position: fixed; inset: 0; background: rgba(0,0,0,.45);
            display: grid; place-items: center; z-index: 10000;
        }
        .loader-box {
            color: #fff; text-align: center; padding: 18px 22px;
            background: rgba(0,0,0,.6); border-radius: 12px;
            backdrop-filter: blur(2px);
        }
        .d-none { display: none !important; }

        /* Spinner pequeno dentro do botão */
        .btn .spinner-border.spinner-border-sm {
            margin-right: .5rem;
        }

        /* Evita múltiplos submits por navegação de teclado */
        .is-loading { pointer-events: none; opacity: .8; }

        /* Textarea com a mesma “cara” do input, mas altura por linhas */
        textarea.form-control-oss {
            height: auto; /* deixa o rows controlar a altura */
            min-height: calc(1.25em * 5 + 24px); /* ~10 linhas + padding (ajuste fino se quiser) */
            padding-top: 12px;
            padding-bottom: 12px;
            line-height: 1.25;
            resize: vertical; /* permite o usuário aumentar se quiser */
        }

        /* Placeholder na cor solicitada */
        textarea.form-control-oss::placeholder {
            color: var(--sulsul-rose-oss); /* #dea2c8 */
            opacity: 1; /* firefox */
        }
        /* (opcional) manter consistência para inputs também */
        .form-control-oss::placeholder {
            color: var(--sulsul-rose-oss);
            opacity: 1;
        }

        /* Social networks */
        .social-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .social-icons-selector {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .social-icon-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--sulsul-purple);
            color: var(--sulsul-rose-oss);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
            transition: transform .2s ease, opacity .2s ease;
            opacity: .6;
        }
        .social-icon-btn.active,
        .social-icon-btn:hover {
            opacity: 1;
            transform: scale(1.08);
        }
        .active-socials-inputs {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .social-input-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .social-input-wrapper .input-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--sulsul-rose-oss);
        }
        .social-input-wrapper .input-shell {
            position: relative;
            flex: 1;
        }
        .social-input-wrapper input.form-control-oss {
            width: 100%;
            padding-left: 40px;
        }
        .btn-remove-social {
            background: transparent;
            border: none;
            color: var(--sulsul-rose-oss);
            cursor: pointer;
            font-size: 1rem;
        }
        .socials-empty {
            font-size: .85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--sulsul-rose-oss);
        }