html,
body {
    height: 100%;
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
}

#prescriptionUploadContainer.dropzone {
    border: 2px dashed #e5e7eb;
    border-radius: 18px;
    padding: 12px 16px;
    transition: background-color .2s,border-color .2s,box-shadow .2s;
    cursor: pointer;
}

    #prescriptionUploadContainer.dropzone.dragover {
        background: #f8f9fa;
        border-color: #0d6efd;
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.15);
    }



.main-wrapper {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.form-container {
    width: 100%;
    max-width: 800px;
    padding: 2rem;
    border: none;
    border-radius: 1rem;
    background-color: #ffffff;
}

/* Barra de progresso */
.progress-bar {
    background: linear-gradient(to right, rgba(255,163,161,1) 50%, rgba(255,146,85,1) 100%);
    transition: width 0.4s ease-in-out;
}

/* Floating inputs */
.form-floating > .form-control,
.form-floating > .form-select {
    border-radius: 2rem;
}

.form-control:focus, .form-select:focus {
    border-color: #ffc999;
    box-shadow: 0 0 0 .25rem rgba(255,123,0,0.25);
}

/* Remove ícones default do Bootstrap nos estados inválidos */
.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-invalid {
    background-image: none !important;
}

.btn-primary {
    background: linear-gradient(to right, rgba(255,163,161,1) 50%, rgba(255,146,85,1) 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    border: none;
    padding: 0.875rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 2rem;
    transition: background-position 0.6s ease-in-out;
    text-transform: uppercase;
    color: #fff;
}

    .btn-primary:hover {
        background-position: 0 0;
    }

.btn-outline-secondary {
    border-radius: 2rem;
    font-weight: 600;
}

.btn-nav {
    min-width: 140px;
}

/* ===== ÍCONES DENTRO DOS CAMPOS ===== */
.form-floating-icon-group {
    position: relative;
}

    /* (reset) todo <i.bi> do grupo volta a inline por padrão */
    .form-floating-icon-group i.bi {
        position: static;
        transform: none;
        opacity: .65;
        z-index: auto;
    }

    /* ícone filho direto do grupo fica absoluto (prefixo do input) */
    .form-floating-icon-group > i.bi {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 2;
    }

    .form-floating-icon-group .form-control,
    .form-floating-icon-group .form-select {
        padding-left: 2.25rem; /* espaço para o ícone */
    }

    /* Ícones no lado direito (se usar olho etc.) */
    .form-floating-icon-group .bi-eye-fill,
    .form-floating-icon-group .bi-eye-slash-fill {
        left: auto;
        right: 1.5rem;
        cursor: pointer;
        position: absolute;
    }

    /* Labels animadas */
    .form-floating-icon-group .form-floating > label {
        transition: all 0.2s ease-in-out;
        padding-left: 3rem;
        background: transparent;
    }

    /* Sobe a label quando foco ou quando marcado como preenchido via JS */
    .form-floating-icon-group:focus-within .form-floating > label,
    .form-floating-icon-group.is-filled .form-floating > label {
        padding-left: 0;
        transform: scale(.85) translateY(-.5rem) translateX(2.7rem);
        color: #666666;
    }

.form-floating > .form-select ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(-.35rem);
}

/* SELECT: mantém label embaixo APENAS quando estiver com placeholder */
.form-floating-icon-group .form-select.select-placeholder ~ label {
    transform: scale(1) translateY(0) translateX(0);
    padding-left: 3rem;
}

/* ===== ÍCONES EM BOTÕES / LABELS (ex.: Anexar mídia) ===== */
label[for="prescriptionUpload"].btn i.bi,
.btn i.bi {
    position: static !important;
    transform: none !important;
    margin-right: .5rem;
    vertical-align: middle;
}

/* ===== EVITA ÍCONES "PERDIDOS" FORA DOS CAMPOS ===== */
.form-step .row > i.bi,
.form-step [class^="col-"] > i.bi,
.invalid-feedback i.bi,
.form-text i.bi {
    display: none !important;
}

/* Estados/etapas */
.form-step {
    display: none;
}

    .form-step.active {
        display: block;
        animation: fadeIn .5s;
    }

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

label sup {
    color: inherit;
}

/* Select placeholder transparente quando vazio (classe é aplicada via JS) */
.select-placeholder {
    color: transparent;
}

.form-select:focus {
    color: #212529;
}

/* Radios */
.form-check-input:checked {
    background-color: #ff8a55;
    border-color: #ff8a55;
}

.form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(255,123,0,0.25);
}

/* Check animado */
.animated-check {
    height: 100px;
    width: 100px;
    margin: 20px auto;
}

    .animated-check .path {
        stroke-dasharray: 1000;
        stroke-dashoffset: 0;
    }

        .animated-check .path.circle {
            animation: dash .9s ease-in-out;
        }

        .animated-check .path.line {
            stroke-dashoffset: 1000;
            animation: dash .9s .35s ease-in-out forwards;
        }

        .animated-check .path.check {
            stroke-dashoffset: -100;
            animation: dash-check .9s .35s ease-in-out forwards;
        }

@keyframes dash {
    0% {
        stroke-dashoffset: 1000
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes dash-check {
    0% {
        stroke-dashoffset: -100
    }

    100% {
        stroke-dashoffset: 900
    }
}

/* ==== PASSO 2 — saneamento de ícones na linha do Produto ==== */

/* Some com QUALQUER <i> ou <svg> com classe .bi dentro do Passo 2... */
.form-step[data-step="2"] i.bi,
.form-step[data-step="2"] svg.bi {
    display: none !important;
}

/* ...e reexiba apenas:
   1) o ícone prefixo do campo (filho DIRETO do .form-floating-icon-group)
   2) o(s) ícone(s) dentro do botão "Anexar mídia" (se houver) */
.form-step[data-step="2"] .form-floating-icon-group > i.bi,
.form-step[data-step="2"] .form-floating-icon-group > svg.bi,
.form-step[data-step="2"] label[for="prescriptionUpload"] i.bi,
.form-step[data-step="2"] label[for="prescriptionUpload"] svg.bi {
    display: inline-block !important;
}

/* Caso algum <i.bi> tenha sido injetado como irmão do grupo, esconda também */
.form-step[data-step="2"] .col-md-6.mb-3.d-flex:first-child > i.bi,
.form-step[data-step="2"] .col-md-6.mb-3.d-flex:first-child .form-floating-icon-group + i.bi {
    display: none !important;
}

/* Evita pseudo-ícones que temas possam injetar em textos/erros */
.form-step[data-step="2"] .form-text::before,
.form-step[data-step="2"] .invalid-feedback::before {
    content: none !important;
}

/* ===== CONTAINER E BOTÕES ===== */
.container {
    max-width: 600px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

/* Container dos botões - APENAS POSICIONAMENTO */
.button-container {
    text-align: right !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Botão PRÓXIMO (#nextBtn) - APENAS POSICIONAMENTO */
#nextBtn {
    float: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Botão CADASTRAR (#btnCadastrar) - APENAS POSICIONAMENTO */
#btnCadastrar {
    float: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Sobrescreve qualquer classe de alinhamento do Bootstrap */
.button-container.text-left,
.button-container.text-center,
.button-container.text-start {
    text-align: right !important;
    justify-content: flex-end !important;
}

/* Garante que os botões não fiquem centralizados */
.text-center .button-container,
.justify-content-center .button-container {
    text-align: right !important;
    justify-content: flex-end !important;
}