/* ===== resources/views/site/movies/view.blade.php ===== */
/* ====== PÁGINA DE FILME ====== */

        .movie-page {
            padding-top: 40px;
            padding-bottom: 40px;
            max-width: 800px;

            /* As 2 linhas abaixo centralizam o contêiner */
            margin-left: auto;
            margin-right: auto;
        }

        /* --- Barra de Meta Informações --- */
        .movie-meta-bar {
            padding: 1rem 0;
            /* border-bottom: 2px solid var(--sulsul-purple); */
            margin-bottom: 30px;
        }

        .meta-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 1rem 2rem;
            list-style: none;
            padding: 0;
            margin: 0;
            font-family: 'Oswald', sans-serif;
            font-weight: 500;
            text-transform: uppercase;
            color: var(--sulsul-green);
            font-size: 0.9rem;
        }

        .meta-list li + li::before {
            /* content: '|'; */
            margin-right: 2rem;
            color: var(--sulsul-purple);
        }

        /* --- Seção Principal do Filme --- */
        .movie-poster-main {
            max-width: 400px;
        }

        .movie-title {
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            font-size: 4rem;
            color: var(--sulsul-title-gray);
            line-height: 1.1;
            margin-bottom: 2rem;
        }

        .movie-description {
            font-family: 'Montserrat', sans-serif;
            color: var(--sulsul-light-gray);
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .action-buttons {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 1rem;
            margin: 0 auto;
            margin-top: 2rem;
        }

        .btn-movie-action {
            background-color: var(--sulsul-purple);
            color: var(--sulsul-title-gray);
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            padding: 0.8rem 2rem;
            border-radius: 4px;
            text-decoration: none;
            transition: filter 0.2s ease;
            width: 177px;
        }
        .btn-movie-action:hover {
            filter: brightness(1.2);
            color: #fff;
        }

        .btn-add-event {
            display: flex;
            align-items: center;
            /* background: none; */
            border: none;
            color: var(--sulsul-title-gray);
            font-family: 'Oswald', sans-serif;
            font-size: 21px !important;
            text-transform: none !important;
            text-align: left;
            height: 52px;
            gap: 35px;
            padding: 5px 15px !important;
        }
        .btn-add-event span {
            font-size: 0.9rem;
            line-height: 1.2;
        }
        .plus-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            /* border: 2px solid var(--sulsul-title-gray); */
            border-radius: 50%;
            font-size: 40px !important;
            line-height: 1;
            transition: all 0.2s ease;
            margin-top: -5px;
        }
        .btn-add-event:hover .plus-icon {
            background-color: var(--sulsul-purple);
            transform: scale(1.1);
        }

        /* --- Ficha Técnica --- */
        .credits-title-wrapper {
            display: flex;
            align-items: center;
            gap: 2rem;
            margin-bottom: 2rem;
        }
        .credits-title-wrapper .hr-custom {
            flex-grow: 1;
        }
        .credits-title {
            font-family: 'Oswald', sans-serif;
            font-size: 1.5rem;
            color: var(--sulsul-purple);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .credits-list {
            font-family: 'Oswald', sans-serif;
            border: 2px solid var(--sulsul-purple);
            padding: 30px 10px;
            color: var(--sulsul-light-gray);
            font-size: 0.9rem;
        }
        .credits-list strong {
            color: var(--sulsul-title-gray);
            font-weight: 400;
        }

        /* --- Estatísticas --- */
        .stat-item {
            align-items: center;
            text-align: center;
            position: relative;
        }
        .stat-item + .stat-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 60%;
            width: 2px;
            background-color: var(--sulsul-purple);
        }

        .stat-number {
            font-family: 'Oswald', sans-serif;
            font-size: 80px;
            font-weight: 700;
            color: var(--sulsul-purple);
            line-height: 1;
            margin-right: 5px;
        }

        .stat-label {
            font-family: 'Oswald', sans-serif;
            font-size: 1rem;
            text-transform: uppercase;
            color: var(--sulsul-purple);
            letter-spacing: 2px;
            margin-top: 0.5rem;
        }

        /* --- Responsividade --- */
        @media (max-width: 991px) {
            .movie-title { font-size: 3rem; }
            .stat-number { font-size: 5rem; }
            .meta-list { justify-content: flex-start; }
            .meta-list li + li::before { content: '|'; margin-right: 1.5rem; margin-left: -0.5rem; }
        }

        @media (max-width: 767px) {
            .stat-item {
                border-bottom: 2px solid var(--sulsul-purple);
                padding-bottom: 2rem;
                margin-bottom: 2rem;
            }
            .stat-item:last-child {
                border-bottom: none;
                margin-bottom: 0;
                padding-bottom: 0;
            }
            .stat-item + .stat-item::before {
                display: none;
            }
        }

        /* ====== ESTILOS PARA O MODAL DE VÍDEO ====== */

        .modal-content {
            background-color: var(--sulsul-dark, #121212);
            border: 2px solid var(--sulsul-purple, #6f1e3b);
            border-radius: 0;
        }

        .modal-header {
            border-bottom: 2px solid var(--sulsul-purple, #6f1e3b);
        }

        .modal-title {
            font-family: 'Oswald', sans-serif;
            color: var(--sulsul-title-gray, #e6e6e6);
            font-weight: 700;
            text-transform: uppercase;
        }

        .modal-body {
            padding: 0; /* Remove o padding para o vídeo encostar nas bordas */
        }

        /* O Bootstrap usa um SVG para o botão de fechar. Este filtro o torna branco. */
        .btn-close {
            filter: invert(1) grayscale(100%) brightness(200%);
        }

/* ===== resources/views/site/movies/index.blade.php ===== */
.datatable-loader {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.6);
            z-index: 5;
        }

/* ===== resources/views/site/movies/form.blade.php ===== */
html, body {
            min-height: 100%;
        }
        main {
            margin-bottom: 200px;
        }
        main.form-page {
            min-height: calc(100vh - 60px);
            padding-bottom: 60px;
        }
        /* --------- NOVO LAYOUT WIZARD (BASEADO NAS IMAGENS) --------- */

        /* --------- NAV (WIZARD) PRINCIPAL --------- */
        .wizard-nav {
            display: flex;
            justify-content: space-between;
            background: var(--sulsul-purple);
            padding: 0;
            border-radius: 5px;
            /* border-bottom: 2px solid var(--wizard-pink, #6f1e3b); */
        }
        .wizard-step {
            font-family: 'Oswald', sans-serif;
            letter-spacing: 1px;
            background: transparent;
            color: var(--sulsul-rose-oss, #dea2c8);
            border: none;
            border-radius: 0;
            padding: 12px 10px;
            text-transform: uppercase;
            flex-grow: 1;
            text-align: center;
            cursor: pointer;
            user-select: none;
            font-size: 0.9rem;
            border-bottom: 4px solid transparent;
            transition: all 0.2s ease;
        }
        .wizard-step.active {
            background: var(--wizard-pink, #6f1e3b);
            color: #fff;
        }
        .wizard-step:not(.active):hover {
            color: #fff;
        }

        /* --------- NAV (WIZARD) SECUNDÁRIA (Ex: Dentro de Credits) --------- */
        .wizard-sub-nav {
            display: flex;
            justify-content: center; /* <--- ADICIONE ISTO */
            gap: 25px;
            margin: 20px 0;
        }
        .wizard-sub-step {
            font-family: 'Oswald', sans-serif;
            font-size: 0.9rem;
            background: transparent;
            border: none;
            color: #aaa;
            padding: 0 5px 10px 5px;
            border-bottom: 3px solid transparent;
            text-transform: uppercase;
            cursor: pointer;
            letter-spacing: 1px;
        }
        .wizard-sub-step.active {
            color: #fff;
            border-bottom-color: var(--wizard-pink, #6f1e3b);
        }
        .wizard-sub-step:not(.active):hover {
            color: #fff;
        }


        /* --------- CARDS / GRID / LAYOUT --------- */
        .section-card { background:#000; padding:0 0; }
        .section-card h2 {
            font-family:'Oswald', sans-serif; letter-spacing: 2px;
            font-size: 1.2rem; color: var(--sulsul-rose-oss, #dea2c8);
            margin: 15px 0; text-transform: uppercase;
        }

        .grid { display:grid; gap: 20px; } /* Aumentei o gap para o novo layout */
        @media (min-width: 768px){ .grid.r2{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
        @media (min-width: 1200px){ .grid.r3{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

        .grid-col-span-2 { grid-column: span 2; }
        .grid-col-span-3 { grid-column: 1 / -1; }
        .row-slim { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
        .divider { border-top:1px solid #222; margin: 25px 0; }
        .title-xl { font-size:25px; font-family:'Oswald', sans-serif; letter-spacing: 4px; color: #fff; }
        .tag { font-size:.8rem; color:#bbb; }
        .muted { color:#aaa; font-size:.9rem; }
        .small { font-size:.875rem; }

        .draft-alert {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            margin: 18px 0;
            border: 1px solid var(--wizard-pink, #6f1e3b);
            border-radius: 6px;
            background: rgba(111, 30, 59, 0.15);
        }
        .draft-alert p {
            margin: 0;
            color: #f9f9f9;
            font-size: 0.9rem;
        }
        .draft-alert a {
            color: #fff;
            text-decoration: underline;
            word-break: break-all;
        }
        .draft-alert .draft-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* --------- CAMPOS DE FORMULÁRIO (Novo Estilo) --------- */
        .form-control-oss, .form-select-oss {
            background: var(--wizard-pink, #6f1e3b);
            color: var(--sulsul-rose-oss); /* Cor do texto digitado */
            border: none;
            border-radius: 0;
            padding: 12px 12px;
            width: 100%;
            font-weight: 200;
            font-size: 30px;
        }

        .form-select-oss {
            width: 100%;
            height: 55px; /* fonte: imagem */
            background-color: var(--sulsul-purple);
            padding: 0 15px;
            box-sizing: border-box;
            color: var(--sulsul-rose-oss); /* fonte: imagem */
            font-family: 'Oswald', sans-serif;
            font-style: normal;
            font-size: 30px; /* fonte: imagem */
            font-weight: 200; /* Bold */
            letter-spacing: 2px;
        }

        .form-label-oss {
            color: #d0d2d3;
            margin-bottom: 6px;
            font-size: 0.8rem; /* Menor */
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .form-label-oss[title] { cursor:help; }

        /* Placeholder (Cor rosa claro) */
        .form-control-oss::placeholder,
        .form-select-oss::placeholder,
        textarea.form-control-oss::placeholder {
            color: var(--sulsul-rose-oss, #dea2c8);
            opacity: 1; /* firefox */
        }

        /* Cor do <select> e <option> */
        .form-select-oss option {
            background: var(--sulsul-purple);
            color: var(--sulsul-rose-oss, #dea2c8);
        }

        /* Textarea */
        textarea.form-control-oss {
            height: auto;
            min-height: 120px;
            padding-top: 12px;
            padding-bottom: 12px;
            line-height: 1.4;
            resize: vertical;
        }

        /* Feedback de erro */
        .invalid-feedback { color:#ff8080; font-size:.82rem; margin-top:6px; }
        .is-invalid { box-shadow: 0 0 0 2px #ff6f6f; } /* Borda não funciona, usar box-shadow */

        /* --------- NOVOS RADIOS E CHECKBOXES --------- */
        .form-check-oss {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #fff;
            cursor: pointer;
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            font-size: 0.9rem;
            position: relative; /* Importante para posicionar o input original */
        }
        .form-check-oss input[type="radio"],
        .form-check-oss input[type="checkbox"] {
            /* Esconde o input original de forma robusta */
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none; /* Garante que ele não interaja com o mouse */
        }
        .form-check-oss .check-mark {
            width: 18px;
            height: 18px;
            border: 2px solid var(--sulsul-rose-oss, #dea2c8);
            background: transparent;
            display: inline-block;
            transition: all 0.1s ease;
            flex-shrink: 0; /* Impede que o quadrado encolha em layouts flexíveis */
        }
        /* Estilos para Radio e Checkbox */
        .form-check-oss input[type="radio"] + .check-mark {
            border-radius: 50%; /* Círculo para radio */
        }
        .form-check-oss input[type="checkbox"] + .check-mark {
            border-radius: 2px; /* Quadrado levemente arredondado para checkbox */
        }
        /* Estado Ativo (Checked) */
        .form-check-oss input:checked + .check-mark {
            background: var(--wizard-pink, #6f1e3b);
            border-color: var(--wizard-pink, #6f1e3b);
            box-shadow: inset 0 0 0 3px #000; /* Borda interna para o "pingo" */
        }
        /* Estado Hover */
        .form-check-oss:hover .check-mark {
            border-color: #fff;
        }

        /* Opcional: Adicionar um ícone de "check" dentro do quadrado para checkboxes */
        .form-check-oss input[type="checkbox"]:checked + .check-mark::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 6px;
            width: 5px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            box-shadow: none; /* Remove a sombra do box-shadow do pai */
        }

        /* --------- MÍDIA (Uploads, Avatares, Thumbs) --------- */
        .thumb { width:180px; height:101px; object-fit:cover; border:1px solid #333; }
        .poster { width:180px; height:270px; object-fit:cover; border:1px solid #333; }
        .gallery-thumb { width:140px; height:90px; object-fit:cover; border:1px solid #333; }
        .invisible-input { position:absolute; left:-9999px; }

        /* --------- BOTÕES E TOOLBAR --------- */
        .toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items: center; }
        /* Botão principal (Salvar, Upload) */
        .btn-oss {
            background: var(--wizard-pink, #6f1e3b);
            color:#fff; border:none; border-radius:0;
            padding:10px 16px; font-family: 'Oswald', sans-serif;
            text-transform: uppercase; letter-spacing: 1px;
            cursor: pointer;
        }
        /* Botão secundário (Ex: + Add Director) */
        .btn-ghost {
            background:transparent;
            color:var(--sulsul-purple);
            border:2px solid var(--sulsul-purple);
            border-radius:10px;
            padding:8px 14px; font-family: 'Oswald', sans-serif;
            text-transform: uppercase; letter-spacing: 1px;
            cursor: pointer;
        }
        .btn-oss:hover, .btn-ghost:hover {
            background: #fff;
            color: #000;
            border-color: #fff;
        }
        .btn-oss.small, .btn-ghost.small {
            padding: 5px 10px;
            font-size: 0.8rem;
        }

        /* --------- LOADER E ESTADOS --------- */
        .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; }
        .is-loading { pointer-events:none; opacity:.8; }


        /* Container para centralizar o botão Save */
        .save-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 40px 0; /* Espaçamento generoso acima e abaixo */
        }

        /* Estilo específico do botão SAVE (Grande e Arredondado) */
        .btn-save-main {
            background: var(--wizard-pink, #6f1e3b);
            color: #aaa;
            border: none;
            border-radius: 5px; /* Borda totalmente arredondada (pill shape) */
            padding: 16px 60px; /* Bem largo e alto, como no layout */
            font-family: 'Oswald', sans-serif;
            font-size: 1.2rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-save-main:hover {
            /*background: #fff;*/
            color: #fff;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sutil sombra ao passar o mouse */
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 30px;
        }

        .btn-step {
            background: var(--wizard-pink, #6f1e3b);
            color: #fff;
            border: none;
            padding: 10px 26px;
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
        }

        .btn-step:hover {
            opacity: 0.9;
        }

        /* checkbox do support video */
        /* Container principal */
        .form-check-oss-support-video {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            position: relative;
            margin-right: 15px; /* Espaçamento lateral entre opções */
            user-select: none;
        }

        /* Esconde o input nativo sem quebrar acessibilidade */
        .form-check-oss-support-video input[type="radio"] {
            opacity: 0;
            position: absolute;
            z-index: -1;
        }

        /* Estilo do texto e criação do círculo via ::before */
        .form-check-oss-support-video span {
            font-family: 'Oswald', sans-serif;
            color: color:#aaa; /* Cor do texto base */
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
        }

        /* O Círculo Externo */
        .form-check-oss-support-video span::before {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #6f1e3b; /* Cor da borda inativa */
            background-color: #6f1e3b;
            border-radius: 50%; /* A MÁGICA: 50% torna o elemento circular */
            margin-right: 8px;
            box-sizing: border-box;
            transition: all 0.2s ease;
        }

        /* Estado Hover (opcional, para feedback visual) */
        .form-check-oss-support-video:hover span::before {
            border-color: #fff;
        }

        /* Estado Selecionado (Checked) */
        .form-check-oss-support-video input[type="radio"]:checked + span::before {
            border-color: #6f1e3b; /* Cor da borda ativa */
            background-color: var(--sulsul-rose-oss); /* Cor do preenchimento ativo */
            /* Truque para fazer o "buraco" no meio: uma sombra interna da cor do fundo do seu site (#000) */
            box-shadow: inset 0 0 0 5px #6f1e3b;
        }

        /* Muda a cor do texto quando selecionado (opcional) */
        .form-check-oss-support-video input[type="radio"]:checked + span {
            color: var(--sulsul-rose-oss, #dea2c8);
        }

        /* Details - upload archives */
        /* Estilo para cada item da lista de Related Content */
        .related-file-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            /* border-bottom: 1px solid #222; */ /* Linha divisória sutil */
        }

        .related-file-name {
            font-family: 'Oswald', sans-serif;
            color: var(--sulsul-rose-oss, #dea2c8);
            font-size: 21px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 20px;
        }

        .btn-remove-file {
            background: var(--wizard-pink, #6f1e3b);
            color: var(--sulsul-rose-oss, #dea2c8);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 4px; /* Levemente arredondado, como no design */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            flex-shrink: 0; /* Garante que o botão não encolha */
        }
        .btn-remove-file:hover {
            background: #fff; /* Vermelho ao passar o mouse para indicar exclusão */
        }

        /* Social Networks */
        /* Container dos ícones sociais */
        .social-icons-selector {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            justify-content: flex-end; /* Alinha à direita como no layout */
        }

        /* Estilo base do ícone social */
        .social-icon-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--wizard-pink, #6f1e3b);
            color: #fff;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.2s ease;
            opacity: 0.6; /* Inativo por padrão */
        }

        /* Estado Hover e Ativo */
        .social-icon-btn:hover,
        .social-icon-btn.active {
            opacity: 1;
            transform: scale(1.1);
        }

        /* Container para os inputs gerados dinamicamente */
        .active-socials-inputs {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 15px;
        }

        /* Wrapper de cada input social (input + botão remover) */
        .social-input-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn-remove-social {
            background: transparent;
            border: none;
            color: #ff6f6f;
            cursor: pointer;
            font-size: 1.2rem;
            padding: 5px;
        }

        /* Wrapper para posicionar o ícone customizado sobre o input */
        .date-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
        }

        /* Estilo base do input de data */
        .form-control-oss[type="date"] {
            appearance: none;       /* Remove estilos nativos do OS */
            -webkit-appearance: none;
            position: relative;
            padding-right: 40px;    /* Espaço para o ícone à direita */

            /* Garante que o texto (a data) fique com a cor correta */
            color: var(--wizard-pink, #6f1e3b); /* Ou #fff se preferir o texto branco */
            font-family: 'Oswald', sans-serif;
            letter-spacing: 1px;
        }

        /* ESCONDE O ÍCONE NATIVO (O segredo!) */
        .form-control-oss[type="date"]::-webkit-calendar-picker-indicator {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: auto;
            height: auto;
            color: transparent;
            background: transparent;
            cursor: pointer;
            z-index: 2; /* Fica invisível POR CIMA de tudo para capturar o clique */
        }

        /* Ícone customizado (falso) que fica posicionado visualmente */
        .date-input-icon {
            position: absolute;
            right: 12px;           /* Posicionado à direita */
            pointer-events: none;  /* O clique passa através dele e atinge o input invisível */
            color: var(--sulsul-rose-oss, #dea2c8); /* Cor rosa do layout */
            font-size: 1.2rem;
            z-index: 1;
        }

        /* Ajuste de cor do texto quando o input tem valor (opcional, se quiser diferenciar) */
        .form-control-oss[type="date"]:valid {
            color: var(--sulsul-rose-oss);
        }

        /* Classe específica para aplicar a rolagem customizada */
        .custom-scroll {
            height: 220px !important; /* Altura fixa para garantir o visual retangular da imagem */
            padding-right: 5px; /* Espaço interno para o texto não colar na barra */
        }

        /* --- BARRA DE ROLAGEM CUSTOMIZADA (WebKit - Chrome, Edge, Safari) --- */

        /* Largura da barra completa */
        .custom-scroll::-webkit-scrollbar {
            width: 16px; /* Um pouco mais larga para acomodar o visual da "trilha" */
            background-color: var(--wizard-pink, #6f1e3b); /* Cor de fundo igual ao do select */
        }

        /* Trilha (o fundo por onde a barra corre) */
        .custom-scroll::-webkit-scrollbar-track {
            background-color: rgba(0,0,0,0.2); /* Um tom mais escuro para dar profundidade */
            margin: 2px 0; /* Pequena margem superior e inferior */
            border-radius: 10px;
        }

        /* Polegar (a parte que se move) */
        .custom-scroll::-webkit-scrollbar-thumb {
            background-color: var(--sulsul-rose-oss, #dea2c8); /* Cor rosa clara */
            border-radius: 10px; /* Bordas arredondadas */
            border: 4px solid var(--wizard-pink, #6f1e3b); /* Truque para fazer o polegar parecer mais fino e ter "margem" */
        }

        /* Polegar ao passar o mouse */
        .custom-scroll::-webkit-scrollbar-thumb:hover {
            background-color: #fff;
        }

        /* Botões da barra de rolagem (setas para cima/baixo) - Nem sempre funcionam bem em todos os OS, mas vamos tentar */
        .custom-scroll::-webkit-scrollbar-button {
            display: block;
            height: 10px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 8px;
        }

        /* Seta para cima (tentativa de simulação com CSS puro, pode variar por OS) */
        .custom-scroll::-webkit-scrollbar-button:decrement {
            /* background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="%23dea2c8"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>'); */
        }
        /* Seta para baixo */
        .custom-scroll::-webkit-scrollbar-button:increment {
            /* background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="%23dea2c8"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>'); */
        }

/* ===== resources/views/site/movies/form_copia.blade.php ===== */
/* --------- NAV (WIZARD) --------- */
        .wizard-nav { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 8px; }
        .wizard-step {
            border:1px solid var(--sulsul-purple);
            padding:8px 12px;
            border-radius:999px;
            cursor:pointer;
            user-select:none;
            font-family:'Oswald', sans-serif;
            letter-spacing:.5px;
            background: var(--sulsul-purple);
            color:var(--sulsul-rose-oss);
        }
        .wizard-step.active {
            background: var(--sulsul-green);
            border-color: var(--sulsul-green);
            color: var(--sulsul-ink-oss);
        }
        .wizard-step.done {
            background:#384942;
            border-color:#384942;
        }

        /* --------- CARDS / GRID / LAYOUT --------- */
        .section-card { background:#000; padding:0px; }
        .section-card h2 { font-family:'Oswald', sans-serif; letter-spacing: 4px; font-size: 30px; color: #d0d2d3; margin: 0 0 12px; }

        .grid { display:grid; gap:12px; }
        @media (min-width: 768px){ .grid.r2{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
        @media (min-width: 1200px){ .grid.r3{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

        .grid-col-span-2 { grid-column: span 2; }
        .grid-col-span-3 { grid-column: 1 / -1; } /* sempre full width */

        .row-slim { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
        .divider { border-top:1px solid #222; margin:12px 0; }
        .title-xl { font-size:25px; font-family:'Oswald', sans-serif; letter-spacing: 4px; }
        .tag { font-size:.8rem; color:#bbb; }
        .muted { color:#aaa; font-size:.9rem; }
        .small { font-size:.875rem; }

        /* --------- CAMPOS DE FORMULÁRIO --------- */
        .form-control-oss, .form-select-oss {
            background: var(--sulsul-purple);
            color: var(--sulsul-rose-oss);
            border:1px solid var(--sulsul-purple);
            padding:10px 12px;
            width:100%;
        }

        .form-label-oss {
            color:#d0d2d3; margin-bottom:6px; font-size:.95rem; display:block;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        }
        .form-label-oss[title] { cursor:help; }

        /* Placeholder (Regra unificada) */
        .form-control-oss::placeholder,
        .form-select-oss::placeholder,
        textarea.form-control-oss::placeholder {
            color: var(--sulsul-rose-oss, #dea2c8);
            opacity: 1; /* firefox */
        }

        /* Textarea (Regra corrigida/preferida do Bloco 2) */
        textarea.form-control-oss {
            height: auto; /* deixa o rows controlar a altura */
            min-height: calc(1.25em * 5 + 24px); /* ~5 linhas + padding */
            padding-top: 12px;
            padding-bottom: 12px;
            line-height: 1.25;
            resize: vertical; /* permite o usuário aumentar se quiser */
        }

        /* Feedback de erro */
        .invalid-feedback { color:#ff8080; font-size:.82rem; margin-top:6px; }
        .is-invalid { border-color:#ff6f6f !important; }

        /* Chips */
        .chip {
            display:inline-flex; align-items:center; gap:6px; border:1px solid #444; color:#ddd;
            padding:6px 10px; border-radius:999px; margin:4px; cursor:pointer;
        }
        .chip input { display:none; }
        .chip.active { background:#1e1e1e; border-color:#6f1e3b; color:#fff; }

        /* --------- MÍDIA (Uploads, Avatares, Thumbs) --------- */
        .avatar-img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            object-fit: cover;
        }
        .avatar-uploader.has-image input[type="file"] {
            display:none; /* esconde input */
        }
        .thumb {
            width:180px; height:101px; object-fit:cover; border-radius:8px; border:1px solid #333;
        }
        .poster {
            width:180px; height:270px; object-fit:cover; border-radius:8px; border:1px solid #333;
        }
        .gallery-thumb {
            width:140px; height:90px; object-fit:cover; border-radius:8px; border:1px solid #333;
        }
        .invisible-input {
            position:absolute; left:-9999px;
        }

        /* --------- BOTÕES E TOOLBAR --------- */
        .toolbar { display:flex; gap:8px; flex-wrap:wrap; }
        .btn-oss { background:#6f1e3b; color:#fff; border:none; border-radius:10px; padding:8px 14px; }
        .btn-ghost { background:transparent; color:#fff; border:1px solid #444; border-radius:10px; padding:8px 14px; }

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

        /* --------- LOADER E ESTADOS (Regras unificadas) --------- */
        .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; }

        .is-loading {
            pointer-events:none;
            opacity:.8;
        }

        .grid.r1 { grid-template-columns: repeat(1, minmax(0,1fr)); }

/* ===== resources/views/site/movies/form_copia_2.blade.php ===== */
/* --------- NOVO LAYOUT WIZARD (BASEADO NAS IMAGENS) --------- */

        /* --------- NAV (WIZARD) PRINCIPAL --------- */
        .wizard-nav {
            display: flex;
            justify-content: space-between;
            background: var(--sulsul-purple);
            padding: 0;
            border-radius: 5px;
            /* border-bottom: 2px solid var(--wizard-pink, #6f1e3b); */
        }
        .wizard-step {
            font-family: 'Oswald', sans-serif;
            letter-spacing: 1px;
            background: transparent;
            color: var(--sulsul-rose-oss, #dea2c8);
            border: none;
            border-radius: 0;
            padding: 12px 10px;
            text-transform: uppercase;
            flex-grow: 1;
            text-align: center;
            cursor: pointer;
            user-select: none;
            font-size: 0.9rem;
            border-bottom: 4px solid transparent;
            transition: all 0.2s ease;
        }
        .wizard-step.active {
            background: var(--wizard-pink, #6f1e3b);
            color: #fff;
        }
        .wizard-step:not(.active):hover {
            color: #fff;
        }

        /* --------- NAV (WIZARD) SECUNDÁRIA (Ex: Dentro de Credits) --------- */
        .wizard-sub-nav {
            display: flex;
            justify-content: center; /* <--- ADICIONE ISTO */
            gap: 25px;
            margin: 20px 0;
        }
        .wizard-sub-step {
            font-family: 'Oswald', sans-serif;
            font-size: 0.9rem;
            background: transparent;
            border: none;
            color: #aaa;
            padding: 0 5px 10px 5px;
            border-bottom: 3px solid transparent;
            text-transform: uppercase;
            cursor: pointer;
            letter-spacing: 1px;
        }
        .wizard-sub-step.active {
            color: #fff;
            border-bottom-color: var(--wizard-pink, #6f1e3b);
        }
        .wizard-sub-step:not(.active):hover {
            color: #fff;
        }


        /* --------- CARDS / GRID / LAYOUT --------- */
        .section-card { background:#000; padding:0 0; }
        .section-card h2 {
            font-family:'Oswald', sans-serif; letter-spacing: 2px;
            font-size: 1.2rem; color: var(--sulsul-rose-oss, #dea2c8);
            margin: 15px 0; text-transform: uppercase;
        }

        .grid { display:grid; gap: 20px; } /* Aumentei o gap para o novo layout */
        @media (min-width: 768px){ .grid.r2{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
        @media (min-width: 1200px){ .grid.r3{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

        .grid-col-span-2 { grid-column: span 2; }
        .grid-col-span-3 { grid-column: 1 / -1; }
        .row-slim { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
        .divider { border-top:1px solid #222; margin: 25px 0; }
        .title-xl { font-size:25px; font-family:'Oswald', sans-serif; letter-spacing: 4px; color: #fff; }
        .tag { font-size:.8rem; color:#bbb; }
        .muted { color:#aaa; font-size:.9rem; }
        .small { font-size:.875rem; }

        /* --------- CAMPOS DE FORMULÁRIO (Novo Estilo) --------- */
        .form-control-oss, .form-select-oss {
            background: var(--wizard-pink, #6f1e3b);
            color: var(--sulsul-rose-oss); /* Cor do texto digitado */
            border: none;
            border-radius: 0;
            padding: 12px 12px;
            width: 100%;
            font-weight: 200;
            font-size: 30px;
        }

        .form-select-oss {
            width: 100%;
            height: 55px; /* fonte: imagem */
            background-color: var(--sulsul-purple);
            padding: 0 15px;
            box-sizing: border-box;
            color: var(--sulsul-rose-oss); /* fonte: imagem */
            font-family: 'Oswald', sans-serif;
            font-style: normal;
            font-size: 30px; /* fonte: imagem */
            font-weight: 200; /* Bold */
            letter-spacing: 2px;
        }

        .form-label-oss {
            color: #d0d2d3;
            margin-bottom: 6px;
            font-size: 0.8rem; /* Menor */
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .form-label-oss[title] { cursor:help; }

        /* Placeholder (Cor rosa claro) */
        .form-control-oss::placeholder,
        .form-select-oss::placeholder,
        textarea.form-control-oss::placeholder {
            color: var(--sulsul-rose-oss, #dea2c8);
            opacity: 1; /* firefox */
        }

        /* Cor do <select> e <option> */
        .form-select-oss option {
            background: var(--sulsul-purple);
            color: var(--sulsul-rose-oss, #dea2c8);
        }

        /* Textarea */
        textarea.form-control-oss {
            height: auto;
            min-height: 120px;
            padding-top: 12px;
            padding-bottom: 12px;
            line-height: 1.4;
            resize: vertical;
        }

        /* Feedback de erro */
        .invalid-feedback { color:#ff8080; font-size:.82rem; margin-top:6px; }
        .is-invalid { box-shadow: 0 0 0 2px #ff6f6f; } /* Borda não funciona, usar box-shadow */

        /* --------- NOVOS RADIOS E CHECKBOXES --------- */
        .form-check-oss {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #fff;
            cursor: pointer;
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            font-size: 0.9rem;
            position: relative; /* Importante para posicionar o input original */
        }
        .form-check-oss input[type="radio"],
        .form-check-oss input[type="checkbox"] {
            /* Esconde o input original de forma robusta */
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none; /* Garante que ele não interaja com o mouse */
        }
        .form-check-oss .check-mark {
            width: 18px;
            height: 18px;
            border: 2px solid var(--sulsul-rose-oss, #dea2c8);
            background: transparent;
            display: inline-block;
            transition: all 0.1s ease;
            flex-shrink: 0; /* Impede que o quadrado encolha em layouts flexíveis */
        }
        /* Estilos para Radio e Checkbox */
        .form-check-oss input[type="radio"] + .check-mark {
            border-radius: 50%; /* Círculo para radio */
        }
        .form-check-oss input[type="checkbox"] + .check-mark {
            border-radius: 2px; /* Quadrado levemente arredondado para checkbox */
        }
        /* Estado Ativo (Checked) */
        .form-check-oss input:checked + .check-mark {
            background: var(--wizard-pink, #6f1e3b);
            border-color: var(--wizard-pink, #6f1e3b);
            box-shadow: inset 0 0 0 3px #000; /* Borda interna para o "pingo" */
        }
        /* Estado Hover */
        .form-check-oss:hover .check-mark {
            border-color: #fff;
        }

        /* Opcional: Adicionar um ícone de "check" dentro do quadrado para checkboxes */
        .form-check-oss input[type="checkbox"]:checked + .check-mark::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 6px;
            width: 5px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            box-shadow: none; /* Remove a sombra do box-shadow do pai */
        }

        /* --------- MÍDIA (Uploads, Avatares, Thumbs) --------- */
        .thumb { width:180px; height:101px; object-fit:cover; border:1px solid #333; }
        .poster { width:180px; height:270px; object-fit:cover; border:1px solid #333; }
        .gallery-thumb { width:140px; height:90px; object-fit:cover; border:1px solid #333; }
        .invisible-input { position:absolute; left:-9999px; }

        /* --------- BOTÕES E TOOLBAR --------- */
        .toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items: center; }
        /* Botão principal (Salvar, Upload) */
        .btn-oss {
            background: var(--wizard-pink, #6f1e3b);
            color:#fff; border:none; border-radius:0;
            padding:10px 16px; font-family: 'Oswald', sans-serif;
            text-transform: uppercase; letter-spacing: 1px;
            cursor: pointer;
        }
        /* Botão secundário (Ex: + Add Director) */
        .btn-ghost {
            background:transparent;
            color:var(--sulsul-purple);
            border:2px solid var(--sulsul-purple);
            border-radius:10px;
            padding:8px 14px; font-family: 'Oswald', sans-serif;
            text-transform: uppercase; letter-spacing: 1px;
            cursor: pointer;
        }
        .btn-oss:hover, .btn-ghost:hover {
            background: #fff;
            color: #000;
            border-color: #fff;
        }
        .btn-oss.small, .btn-ghost.small {
            padding: 5px 10px;
            font-size: 0.8rem;
        }

        /* --------- LOADER E ESTADOS --------- */
        .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; }
        .is-loading { pointer-events:none; opacity:.8; }


        /* Container para centralizar o botão Save */
        .save-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 40px 0; /* Espaçamento generoso acima e abaixo */
        }

        /* Estilo específico do botão SAVE (Grande e Arredondado) */
        .btn-save-main {
            background: var(--wizard-pink, #6f1e3b);
            color: #aaa;
            border: none;
            border-radius: 5px; /* Borda totalmente arredondada (pill shape) */
            padding: 16px 60px; /* Bem largo e alto, como no layout */
            font-family: 'Oswald', sans-serif;
            font-size: 1.2rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-save-main:hover {
            /*background: #fff;*/
            color: #fff;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sutil sombra ao passar o mouse */
        }

        /* checkbox do support video */
        /* Container principal */
        .form-check-oss-support-video {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            position: relative;
            margin-right: 15px; /* Espaçamento lateral entre opções */
            user-select: none;
        }

        /* Esconde o input nativo sem quebrar acessibilidade */
        .form-check-oss-support-video input[type="radio"] {
            opacity: 0;
            position: absolute;
            z-index: -1;
        }

        /* Estilo do texto e criação do círculo via ::before */
        .form-check-oss-support-video span {
            font-family: 'Oswald', sans-serif;
            color: color:#aaa; /* Cor do texto base */
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
        }

        /* O Círculo Externo */
        .form-check-oss-support-video span::before {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #6f1e3b; /* Cor da borda inativa */
            background-color: #6f1e3b;
            border-radius: 50%; /* A MÁGICA: 50% torna o elemento circular */
            margin-right: 8px;
            box-sizing: border-box;
            transition: all 0.2s ease;
        }

        /* Estado Hover (opcional, para feedback visual) */
        .form-check-oss-support-video:hover span::before {
            border-color: #fff;
        }

        /* Estado Selecionado (Checked) */
        .form-check-oss-support-video input[type="radio"]:checked + span::before {
            border-color: #6f1e3b; /* Cor da borda ativa */
            background-color: var(--sulsul-rose-oss); /* Cor do preenchimento ativo */
            /* Truque para fazer o "buraco" no meio: uma sombra interna da cor do fundo do seu site (#000) */
            box-shadow: inset 0 0 0 5px #6f1e3b;
        }

        /* Muda a cor do texto quando selecionado (opcional) */
        .form-check-oss-support-video input[type="radio"]:checked + span {
            color: var(--sulsul-rose-oss, #dea2c8);
        }

        /* Details - upload archives */
        /* Estilo para cada item da lista de Related Content */
        .related-file-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            /* border-bottom: 1px solid #222; */ /* Linha divisória sutil */
        }

        .related-file-name {
            font-family: 'Oswald', sans-serif;
            color: var(--sulsul-rose-oss, #dea2c8);
            font-size: 21px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 20px;
        }

        .btn-remove-file {
            background: var(--wizard-pink, #6f1e3b);
            color: var(--sulsul-rose-oss, #dea2c8);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 4px; /* Levemente arredondado, como no design */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            flex-shrink: 0; /* Garante que o botão não encolha */
        }
        .btn-remove-file:hover {
            background: #fff; /* Vermelho ao passar o mouse para indicar exclusão */
        }

        /* Social Networks */
        /* Container dos ícones sociais */
        .social-icons-selector {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            justify-content: flex-end; /* Alinha à direita como no layout */
        }

        /* Estilo base do ícone social */
        .social-icon-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--wizard-pink, #6f1e3b);
            color: #fff;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.2s ease;
            opacity: 0.6; /* Inativo por padrão */
        }

        /* Estado Hover e Ativo */
        .social-icon-btn:hover,
        .social-icon-btn.active {
            opacity: 1;
            transform: scale(1.1);
        }

        /* Container para os inputs gerados dinamicamente */
        .active-socials-inputs {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 15px;
        }

        /* Wrapper de cada input social (input + botão remover) */
        .social-input-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn-remove-social {
            background: transparent;
            border: none;
            color: #ff6f6f;
            cursor: pointer;
            font-size: 1.2rem;
            padding: 5px;
        }

        /* Wrapper para posicionar o ícone customizado sobre o input */
        .date-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
        }

        /* Estilo base do input de data */
        .form-control-oss[type="date"] {
            appearance: none;       /* Remove estilos nativos do OS */
            -webkit-appearance: none;
            position: relative;
            padding-right: 40px;    /* Espaço para o ícone à direita */

            /* Garante que o texto (a data) fique com a cor correta */
            color: var(--wizard-pink, #6f1e3b); /* Ou #fff se preferir o texto branco */
            font-family: 'Oswald', sans-serif;
            letter-spacing: 1px;
        }

        /* ESCONDE O ÍCONE NATIVO (O segredo!) */
        .form-control-oss[type="date"]::-webkit-calendar-picker-indicator {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: auto;
            height: auto;
            color: transparent;
            background: transparent;
            cursor: pointer;
            z-index: 2; /* Fica invisível POR CIMA de tudo para capturar o clique */
        }

        /* Ícone customizado (falso) que fica posicionado visualmente */
        .date-input-icon {
            position: absolute;
            right: 12px;           /* Posicionado à direita */
            pointer-events: none;  /* O clique passa através dele e atinge o input invisível */
            color: var(--sulsul-rose-oss, #dea2c8); /* Cor rosa do layout */
            font-size: 1.2rem;
            z-index: 1;
        }

        /* Ajuste de cor do texto quando o input tem valor (opcional, se quiser diferenciar) */
        .form-control-oss[type="date"]:valid {
            color: var(--sulsul-rose-oss);
        }

        /* Classe específica para aplicar a rolagem customizada */
        .custom-scroll {
            height: 220px !important; /* Altura fixa para garantir o visual retangular da imagem */
            padding-right: 5px; /* Espaço interno para o texto não colar na barra */
        }

        /* --- BARRA DE ROLAGEM CUSTOMIZADA (WebKit - Chrome, Edge, Safari) --- */

        /* Largura da barra completa */
        .custom-scroll::-webkit-scrollbar {
            width: 16px; /* Um pouco mais larga para acomodar o visual da "trilha" */
            background-color: var(--wizard-pink, #6f1e3b); /* Cor de fundo igual ao do select */
        }

        /* Trilha (o fundo por onde a barra corre) */
        .custom-scroll::-webkit-scrollbar-track {
            background-color: rgba(0,0,0,0.2); /* Um tom mais escuro para dar profundidade */
            margin: 2px 0; /* Pequena margem superior e inferior */
            border-radius: 10px;
        }

        /* Polegar (a parte que se move) */
        .custom-scroll::-webkit-scrollbar-thumb {
            background-color: var(--sulsul-rose-oss, #dea2c8); /* Cor rosa clara */
            border-radius: 10px; /* Bordas arredondadas */
            border: 4px solid var(--wizard-pink, #6f1e3b); /* Truque para fazer o polegar parecer mais fino e ter "margem" */
        }

        /* Polegar ao passar o mouse */
        .custom-scroll::-webkit-scrollbar-thumb:hover {
            background-color: #fff;
        }

        /* Botões da barra de rolagem (setas para cima/baixo) - Nem sempre funcionam bem em todos os OS, mas vamos tentar */
        .custom-scroll::-webkit-scrollbar-button {
            display: block;
            height: 10px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 8px;
        }

        /* Seta para cima (tentativa de simulação com CSS puro, pode variar por OS) */
        .custom-scroll::-webkit-scrollbar-button:decrement {
            /* background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="%23dea2c8"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>'); */
        }
        /* Seta para baixo */
        .custom-scroll::-webkit-scrollbar-button:increment {
            /* background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="%23dea2c8"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>'); */
        }