/* Hero */
.hero-top {
    position: relative;
    min-height: 240px;
    background: #111 center / cover no-repeat;
    background-image: url("/imgs/backgound_cliente.png"); /* sua imagem panorâmica */
}


.hero-svg {
    height: 100%;
    z-index: 0;
}

.overlay-text {
    z-index: 1;
}

/* Card centralizado logo abaixo */
.container {
    margin-top: -90px;
}

@media (max-width: 992px) {
    .container {
        margin-top: -70px;
    }
}

@media (max-width: 576px) {
    .container {
        margin-top: -56px;
    }
}

.form-card {
    max-width: 880px;
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Inputs */
.form-floating > .form-control {
    border-radius: 10px;
}

.form-floating > label {
    color: #6c757d;
}

/* Password */
.password-wrapper {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: .25rem .5rem;
    color: #6c757d;
}

    .toggle-password:hover {
        color: #000;
    }

.pw-strength .pw-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

    .pw-strength .pw-bar span {
        height: 6px;
        border-radius: 4px;
        background: #e9ecef;
        transition: background .2s;
    }

        .pw-strength .pw-bar span.on:nth-child(1) {
            background: #dc3545;
        }

        .pw-strength .pw-bar span.on:nth-child(2) {
            background: #fd7e14;
        }

        .pw-strength .pw-bar span.on:nth-child(3) {
            background: #ffc107;
        }

        .pw-strength .pw-bar span.on:nth-child(4) {
            background: #198754;
        }

.caps-warning {
    margin-top: .25rem;
    color: #dc3545;
}

/* Drop zone */
.drop-zone {
    border: 2px dashed #ced4da;
    border-radius: 12px;
    padding: 18px;
    background: #f8f9fa;
    text-align: center;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

    .drop-zone.dragging {
        background: #f1f3f5;
        border-color: #343a40;
    }

.dz-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.logo-cta i {
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
    color: #6c757d;
}

.logo-preview {
    position: relative;
    display: inline-block;
}

    .logo-preview img {
        width: 140px;
        height: 140px;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: 0 6px 18px rgba(0,0,0,.12);
        border: 1px solid #dee2e6;
        cursor: zoom-in;
    }

    .logo-preview .remove-logo {
        position: absolute;
        top: 6px;
        right: 6px;
        backdrop-filter: blur(4px);
    }

/* Botões */
button {
    border-radius: 10px !important;
    border-color: transparent !important;
}