/* =========================================================
   PONCE PARK
   SISTEMA DE RESERVAS
========================================================= */

:root {

    --pp-orange: #f05a00;
    --pp-orange-dark: #d84f00;

    --pp-black: #111111;
    --pp-white: #ffffff;

    --pp-gray-100: #f7f7f7;
    --pp-gray-200: #ececec;
    --pp-gray-600: #666666;

    --pp-container: 1240px;

}


/* =========================================================
   BASE
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html,
body {
    margin: 0;

    width: 100%;
    min-height: 100%;

    font-family:
        "Urbanist",
        sans-serif;

    background: #0b0b0b;

    color:
        var(--pp-black);
}


button,
input,
select {
    font-family: inherit;
}


.container {

    width:
        min(
            calc(100% - 40px),
            var(--pp-container)
        );

    margin:
        0 auto;

}

/* =========================================================
   HERO - RESERVAS
========================================================= */

.reserva-hero {

    position: relative;

    width: 100%;

    min-height: 680px;

    overflow: hidden;

    background-image:
        url("../img/van-hero.webp");

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;

    color:
        #ffffff;

}


/* =========================================================
   OVERLAY
========================================================= */

.reserva-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .94) 0%,
            rgba(0, 0, 0, .86) 23%,
            rgba(0, 0, 0, .66) 40%,
            rgba(0, 0, 0, .28) 62%,
            rgba(0, 0, 0, .08) 100%
        );

}


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

.reserva-hero-container {

    position: relative;

    z-index: 2;

    width:
        min(
            calc(100% - 40px),
            1240px
        );

    min-height:
        680px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        flex-start;

}


/* =========================================================
   CONTEÚDO
========================================================= */

.reserva-hero-content {

    width:
        520px;

    padding-top:
        42px;

}


/* =========================================================
   LOGO
========================================================= */

.reserva-hero-logo {

    margin-bottom:
        34px;

}


.reserva-hero-logo img {

    display:
        block;

    width:
        200px;

    height:
        auto;

}


/* =========================================================
   TÍTULO
========================================================= */

.reserva-hero-content h1 {
    max-width: 600px;

    margin:
        0
        0
        20px;

    color:
        #ffffff;

    font-size:
        39px;

    font-weight:
        700;

    line-height:
        1.14;

    letter-spacing:
        -1px;

}


.reserva-hero-content h1 strong {

    color:
        #f05a00;

    font-weight:
        800;

}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.reserva-hero-description {

    max-width: 500px;

    margin:
        0;

    color:
        rgba(
            255,
            255,
            255,
            .94
        );

    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1.5;

}


/* =========================================================
   BENEFÍCIOS
========================================================= */

.reserva-hero-benefits {

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    margin-top:
        30px;

}


.reserva-hero-benefit {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    white-space:
        nowrap;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        600;

}


.reserva-hero-benefit i {

    color:
        #f05a00;

    font-size:
        21px;

}

/* =========================================================
   PÁGINA
========================================================= */
.simulator-section {

    position:
        relative;

    z-index:
        10;

    margin-top:
        -125px;

    padding:
        0
        0
        55px;

    background:
        #0b0b0b;

}

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

.simulator-card {
    position:
        relative;

    padding:
        30px;

    border:
        1px solid
        #e8e8e8;

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        0
        18px
        50px
        rgba(
            0,
            0,
            0,
            .08
        );

}


.simulator-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        350px;

    gap:
        36px;

}


/* =========================================================
   CABEÇALHO
========================================================= */

.simulator-heading {

    margin-bottom:
        30px;

}


.simulator-heading h1 {

    margin:
        0
        0
        4px;

    font-size:
        27px;

    font-weight:
        700;

}


.simulator-heading p {

    margin:
        0;

    color:
        #555555;

    font-size:
        15px;

}


/* =========================================================
   CAMPOS
========================================================= */

.simulator-fields {

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.15fr;

    margin-bottom:
        24px;

}


.sim-field-group {

    min-width:
        0;

    padding:
        0
        24px;

    border-right:
        1px solid
        #dddddd;

}


.sim-field-group:first-child {
    padding-left: 0;
}


.sim-field-group:last-child {

    padding-right:
        0;

    border-right:
        0;

}


.sim-field-group h2 {

    min-height:
        40px;

    margin:
        0
        0
        18px;

    font-size:
        15px;

    font-weight:
        700;

}


.sim-field-group > label:not(.sim-option) {

    display:
        block;

    margin-bottom:
        7px;

    font-size:
        13px;

    font-weight:
        500;

}


.sim-label-space {

    margin-top:
        18px !important;

}


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

.sim-control {

    position:
        relative;

}


.sim-input {

    width:
        100%;

    height:
        50px;

    padding:
        0
        43px
        0
        14px;

    border:
        1px solid
        #d5d5d5;

    border-radius:
        9px;

    background:
        #ffffff;

    color:
        #111111;

    font-size:
        14px;

    outline:
        none;

}


.sim-input:focus {

    border-color:
        var(--pp-orange);

    box-shadow:
        0
        0
        0
        3px
        rgba(
            240,
            90,
            0,
            .08
        );

}


.sim-control-icon {

    position:
        absolute;

    top:
        50%;

    right:
        14px;

    transform:
        translateY(-50%);

    pointer-events:
        none;

}


.sim-select {

    appearance:
        none;

    cursor:
        pointer;

}


/* =========================================================
   VAGA
========================================================= */

.sim-field-vaga {

    display:
        flex;

    flex-direction:
        column;

}


.sim-option {

    position:
        relative;

    min-height:
        62px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        0
        0
        12px;

    padding:
        8px
        6px;

    cursor:
        pointer;

}


.sim-option input {

    position:
        absolute;

    opacity:
        0;

}


.sim-radio {

    position:
        relative;

    width:
        22px;

    height:
        22px;

    flex:
        0
        0
        22px;

    border:
        2px solid
        #cccccc;

    border-radius:
        50%;

}


.sim-option input:checked +
.sim-radio {

    border-color:
        var(--pp-orange);

}


.sim-option input:checked +
.sim-radio::after {

    content:
        "";

    position:
        absolute;

    inset:
        4px;

    border-radius:
        50%;

    background:
        var(--pp-orange);

}


.sim-option-text strong {

    font-size:
        14px;

    font-weight:
        600;

}


/* =========================================================
   ALERTA
========================================================= */

.simulator-alert {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        10px
        0
        18px;

    padding:
        13px
        16px;

    border:
        1px solid
        #ffb39a;

    border-radius:
        11px;

    background:
        #fff3ee;

}


.simulator-alert[hidden] {
    display: none;
}


.simulator-alert-icon {

    width:
        36px;

    height:
        36px;

    flex:
        0
        0
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--pp-orange);

    color:
        #ffffff;

}


.simulator-alert div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.simulator-alert strong {

    color:
        #a6310b;

    font-size:
        13px;

}


.simulator-alert span {

    font-size:
        11px;

    line-height:
        1.4;

}


/* =========================================================
   REGRAS
========================================================= */

.simulator-rules {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        12px;

    margin-top:
        18px;

}


.simulator-rule-card {

    padding:
        17px
        18px;

    border:
        1px solid
        #eeeeee;

    border-radius:
        12px;

    background:
        #f8f8f8;

}


.simulator-rule-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        12px;

}


.simulator-rule-icon {

    width:
        31px;

    height:
        31px;

    flex:
        0
        0
        31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px solid
        var(--pp-orange);

    border-radius:
        50%;

    color:
        var(--pp-orange);

}


.simulator-rule-heading strong {

    font-size:
        14px;

}


.simulator-rule-card ul {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.simulator-rule-card li {

    position:
        relative;

    margin-bottom:
        8px;

    padding-left:
        15px;

    color:
        #444444;

    font-size:
        11px;

    line-height:
        1.45;

}


.simulator-rule-card li::before {

    content:
        "";

    position:
        absolute;

    top:
        6px;

    left:
        0;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--pp-orange);

}


/* =========================================================
   CALCULAR
========================================================= */

.btn-calcular-reserva {

    width:
        100%;

    height:
        54px;

    margin-top:
        18px;

    border:
        0;

    border-radius:
        9px;

    background:
        var(--pp-orange);

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        700;

    cursor:
        pointer;

}


.btn-calcular-reserva:hover {

    background:
        var(--pp-orange-dark);

}


.simulator-security {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    margin-top:
        18px;

    color:
        #777777;

    font-size:
        12px;

}


/* =========================================================
   RESUMO
========================================================= */

.simulator-side {

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

}


.summary-box {

    padding:
        22px;

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #fffaf7,
            #fff2ea
        );

}


.summary-box > h2 {

    margin:
        0
        0
        22px;

    color:
        var(--pp-orange);

    text-align:
        center;

    font-size:
        18px;

}


.summary-row {

    display:
        grid;

    grid-template-columns:
        80px
        1fr;

    gap:
        10px;

    margin-bottom:
        10px;

    font-size:
        12px;

}


.summary-row strong {

    font-weight:
        600;

}


.summary-box hr {

    margin:
        14px
        0;

    border:
        0;

    border-top:
        1px solid
        #d3d3d3;

}


.summary-price-option {

    padding:
        13px
        0;

    border-top:
        1px solid
        #dddddd;

}


.summary-price-option:first-child {
    border-top: 0;
}


.summary-price-title strong {

    display:
        block;

    font-size:
        14px;

}


.summary-price-title small {

    display:
        block;

    margin-top:
        2px;

    color:
        #777777;

    font-size:
        10px;

}


.summary-price-values {

    display:
        grid;

    gap:
        6px;

    margin-top:
        10px;

}


.summary-price-values > span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    font-size:
        11px;

}


.summary-price-values strong {

    color:
        var(--pp-orange);

    font-size:
        15px;

}


.summary-note {

    margin-top:
        12px;

    text-align:
        center;

    color:
        #666666;

    font-size:
        10px;

}


.d-none {
    display: none !important;
}


/* =========================================================
   CONTINUAR
========================================================= */

.btn-continuar-reserva {

    width:
        100%;

    min-height:
        74px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        10px
        20px;

    border:
        2px solid
        #46ad61;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #2d9b49;

    text-align:
        left;

    cursor:
        pointer;

}


.btn-continuar-reserva:disabled {

    opacity:
        .45;

    cursor:
        not-allowed;

}


.btn-continuar-reserva > i {

    font-size:
        30px;

}


.btn-continuar-reserva span {

    display:
        flex;

    flex-direction:
        column;

}


.btn-continuar-reserva strong {

    font-size:
        16px;

}


.btn-continuar-reserva small {

    margin-top:
        2px;

    color:
        #777777;

    font-size:
        11px;

}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 1024px
) {

    .simulator-layout {

        grid-template-columns:
            1fr;

    }


    .simulator-side {

        width:
            100%;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 767px
) {

    .container {

        width:
            100%;

        padding:
            0
            12px;

    }


    .simulator-section {

        padding:
            12px
            0;

        align-items:
            flex-start;

    }


    .simulator-card {

        padding:
            20px
            14px;

        border-radius:
            16px;

    }


    .simulator-heading {

        text-align:
            center;

    }


    .simulator-heading h1 {

        font-size:
            23px;

    }


    .simulator-heading p {

        font-size:
            13px;

    }


    .simulator-fields {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .sim-field-group {

        padding:
            0;

        border:
            0;

    }


    .sim-field-group h2 {

        min-height:
            auto;

        margin-bottom:
            10px;

    }


    .simulator-rules {

        grid-template-columns:
            1fr;

    }


    .simulator-rule-card li {

        font-size:
            13px;

    }


    .simulator-side {

        margin-top:
            20px;

    }


    .btn-continuar-reserva {

        justify-content:
            center;

    }

        /* =====================================================
       HERO
    ===================================================== */

    .reserva-hero {

        min-height:
            520px;

        background-position:
            57% center;

    }


    .reserva-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, .93) 0%,
                rgba(0, 0, 0, .80) 55%,
                rgba(0, 0, 0, .45) 100%
            );

    }


    .reserva-hero-container {

        width:
            100%;

        min-height:
            520px;

        padding:
            28px
            22px;

    }


    .reserva-hero-content {

        width:
            100%;

        padding:
            0;

    }


    .reserva-hero-logo {

        margin-bottom:
            32px;

    }


    .reserva-hero-logo img {

        width:
            180px;

    }


    .reserva-hero-content h1 {

        max-width:
            360px;

        font-size:
            31px;

        line-height:
            1.14;

    }


    .reserva-hero-description {

        max-width:
            330px;

        font-size:
            14px;

    }


    .reserva-hero-benefits {

        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            14px
            18px;

        margin-top:
            28px;

    }


    .reserva-hero-benefit {

        white-space:
            normal;

        font-size:
            11px;

    }


    .simulator-section {

        margin-top:
            -42px;

        padding-bottom:
            24px;

    }

}