/* =========================================================
   ESTILOS GERAIS (BASE)
   ========================================================= */
/* Container Principal - Será o contêiner Flex para centralização no desktop */
.formspring-container {
    position: static;
    width: 100%;
    min-height: auto;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Card Principal */
.formspring-card {
    width: 100%;
    max-width: 100px;

    /* Largura para acomodar 2 colunas internas */
    padding: 30px;
    border-radius: 22px;

    /* Layout Interno em Grid (2 colunas para os campos) */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-content: start;

    /* Estilos Visuais */
    background: rgba(120, 70, 210, 0.12);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(200, 150, 255, 0.28);
    box-shadow: 0 0 25px rgba(150, 95, 255, 0.35), 0 0 50px rgba(100, 40, 255, 0.15) inset;
}

/* === REGRAS DE GRID (OCUPAR LARGURA TOTAL) === */
.formspring-title,
.formspring-sub,
.formspring-section,
.formspring-submit,
.formspring-full-width {
    grid-column: 1 / -1;

    /* Ocupa as duas colunas */
}

.formspring-section {
    margin-top: 10px;
    margin-bottom: 0px;
    color: #f8e6ff;
    font-size: 19px;
    font-weight: 600;
}

.formspring-group {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

/* Inputs e Selects */
.formspring-input,
.formspring-select,
.formspring-dynamic-input {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(200, 160, 255, 0.35);
    background: rgba(255, 255, 255, 0.07);
    color: white;
    font-size: 15px;
    outline: none;
    transition: border 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

/* Correção para opções do Select */
.formspring-select option {
    background-color: #1a0b2e;
    color: white;
}

/* Tipografia e Botões */
.formspring-title {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    color: #f5e6ff;
    text-shadow: 0 0 20px rgba(255, 230, 255, 0.14);
}

.formspring-sub {
    text-align: center;
    color: #e2caff;
    font-size: 15px;
    margin-bottom: 10px;
}

.formspring-label {
    display: block;
    color: #e4c7ff;
    margin-bottom: 6px;
    font-size: 15px;
}

.formspring-submit {
    width: 100%;
    padding: 15px;
    margin-top: 10px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #a259ff, #7c1fff);
    color: white;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

/* =========================================================
   RESPONSIVIDADE: TABLET E MOBILE (ATÉ 899px)
   ========================================================= */
@media (max-width: 899px) {
    .formspring-container {
        /* Permite scroll e ocupa a largura normal */
        position: static;
        min-height: auto;
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
        padding: 30px 16px;
    }

    .formspring-card {
        /* Garante que o card volte ao fluxo normal no mobile */
        position: static;
        transform: none;
        margin: 0 auto;

        /* Centralização horizontal básica no mobile */
        display: flex;
        flex-direction: column;
        max-width: 100%;
        gap: 10px;
        padding: 20px 15px;
    }

    /* Reseta grid-column pois agora é flex */
    .formspring-title,
    .formspring-sub,
    .formspring-section,
    .formspring-submit,
    .formspring-full-width {
        grid-column: auto;
    }

    /* Esconde mídia no mobile */
    .formspring-media {
        display: none !important;
    }

    /* Ajustes de tamanho mobile */
    .formspring-input,
    .formspring-select,
    .formspring-dynamic-input {
        padding: 8px 10px;
        height: 40px;
        font-size: 14px;
    }

    .formspring-label {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .formspring-group {
        margin-bottom: 8px;
    }

    .formspring-title {
        font-size: 22px;
        margin-bottom: 5px;
    }

    .formspring-sub {
        font-size: 13px;
        margin-bottom: 15px;
    }

    .formspring-section {
        font-size: 16px;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .formspring-submit {
        padding: 12px;
        margin-top: 15px;
        font-size: 16px;
    }
}

/* =========================================================
   RESPONSIVIDADE: DESKTOP (900px OU MAIS) - CENTRALIZAÇÃO FLEXBOX (ROLÁVEL)
   ========================================================= */
@media (min-width: 900px) {
    .formspring-container {
        /* Centralização total usando Flexbox para que o card acompanhe a rolagem */
        display: flex;
        justify-content: center;

        /* Centro Horizontal */
        align-items: center;

        /* Centro Vertical */
        /* Ocupa a altura total da viewport, mas permite rolagem se o conteúdo for maior */
        min-height: 100vh;
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .formspring-card {
        /* Retorna ao fluxo normal, sendo gerenciado pelo Flexbox do container */
        position: static;
        transform: none;
        width: 100%;
        max-width: 900px;
        margin: 0;

        /* Limpa margens */
        flex-shrink: 0;

        /* Garante que o card não encolha */
    }

    /* Garante que a div de mídia não interfira no layout centralizado */
    .formspring-media {
        display: none;
    }
}