/* =========================
   BASE
========================= */
body {
    margin: 0;
    font-family: "Inter", sans-serif;
    background: linear-gradient(135deg, #f5f7fb, #eef2f7);
}
/* =========================
   VARIAÇÃO USUÁRIO NORMAL
========================= */

.subtitle {
    color: #777;
}

/* destaque mais leve (menos "corporativo") */
.info-box {
    background: rgba(0, 123, 255, 0.08);
    border-left: 3px solid #007bff;
}

/* botão mais “friendly” */
.btn-primary {
    background: linear-gradient(135deg, #007bff, #00c6ff);
    box-shadow: 0 10px 25px rgba(0,123,255,0.25);
}

.btn-primary:hover {
    box-shadow: 0 15px 35px rgba(0,123,255,0.35);
}

/* =========================
   HEADER LOGO
========================= */
.top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    z-index: 10;
}

.logo {
    width: 90px;
}

/* =========================
   WRAPPER
========================= */
.register-wrapper {
    display: flex;
    justify-content: center;
    padding-top: 120px;
}

/* CARD PRINCIPAL */
.register-card {
    width: 100%;
    max-width: 420px;

    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(12px);

    border-radius: 18px;
    padding: 30px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

/* TITULOS */
.title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.subtitle {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
}

/* =========================
   INFO BOX
========================= */
.info-box {
    background: rgba(255, 165, 0, 0.1);
    border-left: 3px solid orange;
    padding: 10px;
    font-size: 0.8rem;
    border-radius: 8px;
    margin-bottom: 15px;
    color: #444;
}

/* =========================
   INPUT MODERNO (FLOAT LABEL)
========================= */
.input-group {
    position: relative;
    margin-bottom: 20px;
}

.input-group input {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    transition: 0.3s;
}

.input-group label {
    position: absolute;
    left: 14px;
    top: 14px;
    font-size: 0.85rem;
    color: #888;
    transition: 0.3s;
    pointer-events: none;
}

/* efeito foco */
.input-group input:focus {
    border-color: orange;
    box-shadow: 0 0 0 3px rgba(255,165,0,0.15);
}

/* label sobe */
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
    top: -8px;
    left: 10px;
    font-size: 0.7rem;
    background: white;
    padding: 0 5px;
    color: orange;
}

/* =========================
   BOTÃO
========================= */
.btn-primary {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;

    background: linear-gradient(135deg, #ff9800, #ffb347);
    color: white;
    font-weight: 600;
    font-size: 1rem;

    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 10px 25px rgba(255,152,0,0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
}

/* =========================
   INPUT STATE MODERNO
========================= */

.input-group {
    position: relative;
    margin-bottom: 22px;
}

/* label animado */
.input-group label {
    position: absolute;
    left: 14px;
    top: 14px;
    font-size: 0.85rem;
    color: #888;
    transition: 0.3s ease;
    pointer-events: none;
}

/* focus ou preenchido */
.input-group.active label {
    top: -8px;
    font-size: 0.7rem;
    background: white;
    padding: 0 5px;
    color: orange;
}

/* input */
.input-group input {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    outline: none;
    transition: 0.3s;
}

/* foco */
.input-group input:focus {
    border-color: orange;
    box-shadow: 0 0 0 3px rgba(255,165,0,0.15);
}

/* =========================
   FEEDBACK VISUAL (ERRO)
========================= */

.input-error {
    border-color: red !important;
    box-shadow: 0 0 0 3px rgba(255,0,0,0.15) !important;
}