/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   BODY
========================================================= */

body {
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.08), transparent 35%),
        linear-gradient(135deg, #f4f7fb 0%, #eef2f7 100%);

    font-family: Arial, Helvetica, sans-serif;

    color: #263238;

    min-height: 100vh;
}


/* =========================================================
   CONTAINER PRINCIPAL
========================================================= */

.container {
    position: relative;
}


/* =========================================================
   CARD PRINCIPAL
========================================================= */

.card {
    border-radius: 24px !important;

    overflow: visible;

    background: rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.8) !important;

    box-shadow:
        0 20px 60px rgba(30, 50, 80, 0.12) !important;
}


.card-body {
    padding: 40px !important;
}


/* =========================================================
   TÍTULOS
========================================================= */

h2 {
    font-weight: 800;

    color: #172033;

    letter-spacing: -0.5px;
}


h2 i {
    margin-right: 8px;
}


.text-muted {
    color: #687587 !important;

    line-height: 1.6;
}


/* =========================================================
   BOX DOS ENDEREÇOS
========================================================= */

.endereco-box {
    background: #f8fafc;

    border: 1px solid #e5eaf0;

    border-radius: 18px;

    padding: 22px;

    transition: all 0.25s ease;
}


.endereco-box:hover {
    border-color: #cbd8e8;

    box-shadow:
        0 8px 25px rgba(20, 40, 70, 0.06);
}


/* =========================================================
   TÍTULO DO ENDEREÇO
========================================================= */

.titulo-endereco {
    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 18px;

    margin-bottom: 20px;

    color: #172033;
}


.icone-endereco {
    width: 42px;

    height: 42px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 17px;
}


.icone-endereco.retirada {
    background: linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );
}


.icone-endereco.destino {
    background: linear-gradient(
        135deg,
        #16a34a,
        #15803d
    );
}


/* =========================================================
   LABELS
========================================================= */

.form-label {
    font-weight: 700;

    color: #3c4858;

    margin-bottom: 8px;
}


/* =========================================================
   INPUTS
========================================================= */

.form-control {
    border: 1px solid #dce2e9;

    background: #ffffff;

    color: #263238;

    border-radius: 12px;

    min-height: 48px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.form-control:hover {
    border-color: #b9c7d8;
}


.form-control:focus {
    border-color: #0d6efd;

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(13, 110, 253, 0.10);

    outline: none;
}


.form-control::placeholder {
    color: #9aa5b1;
}


/* =========================================================
   INPUT CEP
========================================================= */

.cep {
    letter-spacing: 1px;

    font-weight: 600;
}


/* =========================================================
   INPUT READONLY
========================================================= */

.form-control[readonly] {
    background: #eef2f6;

    color: #596575;

    cursor: not-allowed;
}


/* =========================================================
   BOTÃO BUSCAR CEP
========================================================= */

.input-group .btn {
    min-width: 58px;

    border-radius: 0 12px 12px 0;

    border-color: #0d6efd;

    font-size: 17px;
}


.input-group .form-control {
    border-radius: 12px 0 0 12px;
}


/* =========================================================
   STATUS DO CEP
========================================================= */

.status-cep {
    display: block;

    min-height: 20px;

    margin-top: 6px;

    font-size: 13px;

    color: #687587;
}


.status-cep.sucesso {
    color: #15803d;

    font-weight: 600;
}


.status-cep.erro {
    color: #dc2626;

    font-weight: 600;
}


.status-cep.carregando {
    color: #0d6efd;
}


/* =========================================================
   AUTOCOMPLETE
========================================================= */

.position-relative {
    position: relative;
}


.lista-enderecos {
    display: none;

    position: absolute;

    left: 0;

    right: 0;

    top: 100%;

    width: 100%;

    background: #ffffff;

    border: 1px solid #e1e6ec;

    border-radius: 12px;

    box-shadow:
        0 15px 35px rgba(20, 40, 70, 0.15);

    z-index: 9999;

    max-height: 260px;

    overflow-y: auto;

    margin-top: 5px;
}


.item-endereco {
    padding: 13px 15px;

    cursor: pointer;

    border-bottom: 1px solid #edf0f3;

    color: #374151;

    font-size: 14px;

    line-height: 1.4;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.item-endereco:last-child {
    border-bottom: none;
}


.item-endereco:hover {
    background: #eef5ff;

    color: #0d6efd;
}


.item-endereco i {
    margin-right: 8px;

    color: #0d6efd;
}


/* =========================================================
   BOTÃO PRINCIPAL
========================================================= */

.btn-primary {
    min-height: 56px;

    border: none;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #0757c9
        );

    font-size: 17px;

    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(13, 110, 253, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.btn-primary:hover {
    background:
        linear-gradient(
            135deg,
            #0b63e5,
            #064eb7
        );

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(13, 110, 253, 0.32);
}


.btn-primary:active {
    transform: translateY(0);
}


.btn-primary i {
    margin-right: 8px;
}


/* =========================================================
   RESULTADO
========================================================= */

#resultado {
    animation: aparecerResultado 0.4s ease;
}


@keyframes aparecerResultado {

    from {
        opacity: 0;

        transform: translateY(12px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* =========================================================
   ALERTAS
========================================================= */

.alert {
    border-radius: 14px;

    border: none;

    line-height: 1.5;
}


/* =========================================================
   IMAGEM FIORINO
========================================================= */

.col-md-5 {
    position: relative;
}


.img-fluid {
    max-width: 100%;

    filter:
        drop-shadow(
            0 20px 25px rgba(0, 0, 0, 0.20)
        );

    animation:
        fiorinoFlutuar 3.5s ease-in-out infinite;
}


@keyframes fiorinoFlutuar {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

    100% {
        transform: translateY(0);
    }

}


/* =========================================================
   LOADING
========================================================= */

.loading {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 20px;

    color: #64748b;
}


.spinner {
    width: 38px;

    height: 38px;

    border-radius: 50%;

    border: 4px solid #dbe5f1;

    border-top-color: #0d6efd;

    animation:
        girar 0.8s linear infinite;
}


@keyframes girar {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FOOTER
========================================================= */

footer {
    margin-top: 50px;

    background:
        linear-gradient(
            135deg,
            #172033,
            #0d1422
        ) !important;

    border-radius: 18px 18px 0 0;
}


footer h5 {
    font-weight: 700;

    margin-bottom: 10px;
}


footer p {
    color: #aeb8c5;

    line-height: 1.6;
}


footer i {
    margin-right: 6px;
}


/* =========================================================
   SCROLLBAR
========================================================= */

.lista-enderecos::-webkit-scrollbar {
    width: 7px;
}


.lista-enderecos::-webkit-scrollbar-track {
    background: #f1f3f5;
}


.lista-enderecos::-webkit-scrollbar-thumb {
    background: #c5ced9;

    border-radius: 20px;
}


/* =========================================================
   RESPONSIVIDADE
========================================================= */

@media (max-width: 991px) {

    .card-body {
        padding: 28px !important;
    }

    .col-md-5 {
        margin-top: 30px;
    }

    .img-fluid {
        max-height: 250px;
    }

}


@media (max-width: 767px) {

    body {
        background: #f4f7fb;
    }

    .container {
        padding-left: 15px;

        padding-right: 15px;
    }

    .card {
        border-radius: 18px !important;
    }

    .card-body {
        padding: 20px !important;
    }

    h2 {
        text-align: center;

        font-size: 25px;
    }

    .text-muted {
        text-align: center;
    }

    .endereco-box {
        padding: 17px;
    }

    .titulo-endereco {
        font-size: 16px;
    }

    .icone-endereco {
        width: 38px;

        height: 38px;
    }

    .img-fluid {
        max-height: 220px;

        margin-top: 10px;
    }

    footer {
        text-align: center;
    }

}


@media (max-width: 480px) {

    .card-body {
        padding: 15px !important;
    }

    .endereco-box {
        padding: 14px;
    }

    .form-control {
        min-height: 46px;

        font-size: 14px;
    }

    .btn-primary {
        min-height: 52px;

        font-size: 16px;
    }

    .input-group .btn {
        min-width: 52px;
    }

}


/* =========================================================
   ANIMAÇÃO DE FOCO
========================================================= */

.endereco-box:focus-within {
    border-color: rgba(13, 110, 253, 0.35);

    box-shadow:
        0 8px 30px rgba(13, 110, 253, 0.07);
}


/* =========================================================
   PEQUENOS DETALHES
========================================================= */

strong {
    font-weight: 700;
}


hr {
    border-color: #e7ebef;
}


button {
    cursor: pointer;
}
/* =========================================================
   ESCOLHA DO MÉTODO DE ENDEREÇO
========================================================= */

.escolha-metodo {
    padding: 5px 0 8px;
}

.texto-escolha {
    font-size: 14px;
    font-weight: 600;
    color: #667085;
    margin-bottom: 12px;
}


/* =========================================================
   BOTÕES CEP / MANUAL
========================================================= */

.btn-metodo {
    width: 100%;
    min-height: 54px;

    border: 1px solid #dbe3ec;

    background: #ffffff;

    color: #344054;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 700;

    transition: all 0.2s ease;

    box-shadow: 0 3px 10px rgba(20, 40, 70, 0.04);
}


.btn-metodo i {
    margin-right: 7px;

    color: #0d6efd;

    font-size: 16px;
}


.btn-metodo:hover {
    background: #f5f9ff;

    border-color: #0d6efd;

    color: #0d6efd;

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(13, 110, 253, 0.12);
}


.btn-metodo:active {
    transform: translateY(0);
}


/* =========================================================
   ENDEREÇO ATIVO
========================================================= */

.endereco-ativo {
    border-color: rgba(13, 110, 253, 0.30);

    box-shadow:
        0 8px 25px rgba(13, 110, 253, 0.07);
}


/* =========================================================
   ÁREA DE CEP
========================================================= */

.area-endereco {
    margin-top: 16px;

    padding: 16px;

    background: #f8fafc;

    border-radius: 14px;

    border: 1px solid #e8edf3;

    animation:
        aparecerEndereco 0.25s ease;
}


@keyframes aparecerEndereco {

    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   DADOS DO ENDEREÇO
========================================================= */

.dados-endereco {
    margin-top: 18px;

    animation:
        aparecerEndereco 0.3s ease;
}


/* =========================================================
   BOTÃO VOLTAR / ALTERAR MÉTODO
========================================================= */

.btn-alterar-metodo {
    border: none;

    background: transparent;

    color: #0d6efd;

    font-size: 13px;

    font-weight: 600;

    padding: 5px 0;

    margin-top: 8px;
}


.btn-alterar-metodo:hover {
    text-decoration: underline;
}


/* =========================================================
   STATUS CEP
========================================================= */

.status-cep {
    display: block;

    min-height: 20px;

    margin-top: 7px;

    font-size: 13px;
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 575px) {

    .btn-metodo {
        min-height: 50px;

        font-size: 12px;

        padding: 8px 5px;
    }


    .btn-metodo i {
        display: block;

        margin: 0 0 4px;

        font-size: 17px;
    }


    .texto-escolha {
        text-align: center;

        font-size: 13px;
    }

}