/* =========================================================
   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-date-display {

    display:
        none;

}


.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;

	text-align:
		center;

	text-align-last:
		center;

	padding-left:
		44px;

	padding-right:
		44px;

}

/* =========================================================
   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;

}

/* =========================================================
   LOGIN / CADASTRO - HERO
========================================================= */

.reserva-hero-account {

	position: absolute;

	top: 30px;
	right: 42px;

	z-index: 10;

	display: flex;

	align-items: center;

	gap: 10px;

}


/* =========================================================
   LOGIN
========================================================= */

.reserva-account-login {

	min-height: 42px;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 7px;

	padding: 0 17px;

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			.55
		);

	border-radius: 10px;

	background:
		rgba(
			0,
			0,
			0,
			.30
		);

	backdrop-filter:
		blur(6px);

	color: #ffffff;

	font-size: 13px;
	font-weight: 600;

	text-decoration: none;

	transition:
		background .2s ease,
		border-color .2s ease,
		transform .2s ease;

}


.reserva-account-login i {

	font-size: 17px;

}


.reserva-account-login:hover {

	background:
		rgba(
			255,
			255,
			255,
			.12
		);

	border-color: #ffffff;

	transform:
		translateY(-1px);

}


/* =========================================================
   CADASTRO
========================================================= */

.reserva-account-register {

	min-height: 42px;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	padding: 0 20px;

	border-radius: 10px;

	background: #f05a00;

	color: #ffffff;

	font-size: 13px;
	font-weight: 700;

	text-decoration: none;

	transition:
		background .2s ease,
		transform .2s ease;

}


.reserva-account-register:hover {

	background: #d84f00;

	transform:
		translateY(-1px);

}

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

@media (
    max-width: 1024px
) {

    .simulator-layout {

        grid-template-columns:
            1fr;

    }


    .simulator-side {

        width:
            100%;

    }

}

/* =========================================================
   PONCE PARK - MENU DO CLIENTE NA HOME
========================================================= */

/* CONTAINER */

.reserva-cliente-conta {
    position: relative;
}


/* BOTÃO OLÁ, CLIENTE */

.reserva-cliente-toggle {
    font-family: inherit;
    cursor: pointer;
}

.reserva-cliente-seta {
    margin-left: 5px;
    font-size: 11px !important;
    transition: transform .2s ease;
}

.reserva-cliente-toggle[aria-expanded="true"]
.reserva-cliente-seta {
    transform: rotate(180deg);
}


/* MENU SUSPENSO */

.reserva-cliente-menu {
    position: absolute;
    z-index: 100;

    top: calc(100% + 10px);
    right: 0;

    width: 220px;
    padding: 8px;

    border: 1px solid #e5e5e5;
    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .20);
}

.reserva-cliente-menu[hidden] {
    display: none !important;
}


/* LINKS E BOTÃO SAIR */

.reserva-cliente-menu a,
.reserva-cliente-sair {
    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 0 12px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #333333;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
    text-align: left;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}


/* HOVER */

.reserva-cliente-menu a:hover,
.reserva-cliente-sair:hover {
    background: #fff3eb;
    color: #ed6b24;
}


/* ÍCONES */

.reserva-cliente-menu a i,
.reserva-cliente-sair i {
    font-size: 16px;
}


/* DIVISÓRIA */

.reserva-cliente-divisor {
    height: 1px;
    margin: 7px 4px;
    background: #ededed;
}


/* FORMULÁRIO SAIR */

.reserva-cliente-menu form {
    margin: 0;
}

/* =========================================
   DESTAQUE - NOVA RESERVA
========================================= */

.reserva-cliente-menu
.reserva-menu-nova-reserva {
    color: #ed6b24;
    font-weight: 700;
}

.reserva-cliente-menu
.reserva-menu-nova-reserva:hover {
    background: #fff3eb;
    color: #ed6b24;
}

/* =========================================================
   MOBILE
   VISUAL COMPACTO NO PADRÃO DO SITE WORDPRESS
   SOMENTE ATÉ 767PX
========================================================= */

@media (
    max-width: 767px
) {

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

    .container {

        width:
            100%;

        padding:
            0
            16px;

    }


    .simulator-section {

        /*
         * O card continua entrando levemente sobre o hero,
         * mas agora existe uma área livre no final do hero.
         * Assim ele nunca cobre benefícios ou textos.
         */
        margin-top:
            -48px;

        padding:
            12px
            0
            28px;

        align-items:
            flex-start;

    }


    .simulator-card {

        padding:
            24px
            16px
            26px;

        border-radius:
            24px;

        overflow:
            hidden;

    }


    /*
     * No mobile retiramos apenas as caixas intermediárias
     * do layout para poder ordenar os mesmos elementos
     * sem alterar o HTML e sem tocar no desktop.
     */
    .simulator-layout {

        display:
            flex;

        flex-direction:
            column;

        gap:
            0;

    }


    .simulator-main,
    .simulator-side {

        display:
            contents;

    }


    /* =====================================================
       ORDEM VISUAL MOBILE
    ===================================================== */

    .simulator-heading {

        order:
            1;

    }


    .simulator-fields {

        order:
            2;

    }


    .simulator-alert {

        order:
            3;

    }


    .summary-box {

        order:
            4;

    }


    .btn-continuar-reserva {

        order:
            5;

    }


    .simulator-rules {

        order:
            6;

    }


    .simulator-security {

        order:
            7;

    }


    /*
     * O cálculo do sistema já é automático ao alterar
     * data, hora ou tipo de vaga. No mobile este botão
     * puramente visual não é necessário.
     */
    .btn-calcular-reserva {

        display:
            none;

    }


    /* =====================================================
       CABEÇALHO DO SIMULADOR
    ===================================================== */

    .simulator-heading {

        margin-bottom:
            30px;

        text-align:
            center;

    }


    .simulator-heading h1 {

        margin:
            0
            auto
            8px;

        max-width:
            330px;

        font-size:
            26px;

        font-weight:
            700;

        line-height:
            1.12;

        letter-spacing:
            -0.4px;

    }


    .simulator-heading p {

        max-width:
            330px;

        margin:
            0
            auto;

        color:
            #666666;

        font-size:
            15px;

        line-height:
            1.35;

    }


    /* =====================================================
       CAMPOS
       DATA + HORA LADO A LADO
    ===================================================== */

    .simulator-fields {

        display:
            flex;

        flex-direction:
            column;

        gap:
            0;

        margin-bottom:
            0;

    }


    .sim-field-group {

        min-width:
            0;

        padding:
            0;

        border:
            0;

    }


    .sim-field-group:not(.sim-field-vaga) {

        display:
            grid;

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

        column-gap:
            10px;

        row-gap:
            7px;

        margin:
            0
            0
            24px;

        padding:
            0
            0
            24px;

        border-bottom:
            1px solid
            #eeeeee;

    }


    .sim-field-group:not(.sim-field-vaga) > h2 {

        grid-column:
            1 / -1;

        grid-row:
            1;

        min-height:
            auto;

        margin:
            0
            0
            18px;

        text-align:
            center;

        font-size:
            23px;

        font-weight:
            700;

        line-height:
            1.15;

    }


    .sim-field-group:not(.sim-field-vaga) > label:nth-child(2) {

        grid-column:
            1;

        grid-row:
            2;

    }


    .sim-field-group:not(.sim-field-vaga) > .sim-control:nth-child(3) {

        grid-column:
            1;

        grid-row:
            3;

    }


    .sim-field-group:not(.sim-field-vaga) > label:nth-child(4) {

        grid-column:
            2;

        grid-row:
            2;

        margin-top:
            0 !important;

    }


    .sim-field-group:not(.sim-field-vaga) > .sim-control:nth-child(5) {

        grid-column:
            2;

        grid-row:
            3;

    }


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

        margin:
            0;

        font-size:
            15px;

        font-weight:
            500;

    }


    .sim-label-space {

        margin-top:
            0 !important;

    }


    /* =====================================================
       INPUTS MOBILE / IPHONE
    ===================================================== */

    .sim-control {

        min-width:
            0;

        width:
            100%;

    }


    .sim-input {

        display:
            block;

        width:
            100%;

        min-width:
            0;

        max-width:
            100%;

        height:
            54px;

        padding:
            0
            40px
            0
            12px;

        border-radius:
            10px;

        font-size:
            16px;

        line-height:
            1;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

    }


    /*
     * iOS/Safari exibe input type="date" no formato textual
     * do aparelho ("25 de ago. de 2026"). Para manter o
     * calendário nativo e mostrar DD/MM/AAAA, o input real
     * fica transparente sobre uma camada visual formatada.
     */
    .sim-control-date {

        position:
            relative;

        height:
            54px;

    }


    .sim-control-date input[type="date"].sim-input {

        position:
            absolute;

        inset:
            0;

        z-index:
            3;

        width:
            100%;

        min-width:
            0;

        max-width:
            100%;

        height:
            100%;

        margin:
            0;

        padding:
            0;

        border:
            0;

        opacity:
            0;

        cursor:
            pointer;

        -webkit-appearance:
            none;

        appearance:
            none;

    }


    .sim-control-date .sim-date-display {

        position:
            absolute;

        inset:
            0;

        z-index:
            1;

        width:
            100%;

        height:
            54px;

        padding:
            0
            40px
            0
            12px;

        display:
            flex;

        align-items:
            center;

        border:
            1px solid
            #d5d5d5;

        border-radius:
            10px;

        background:
            #ffffff;

        color:
            #111111;

        font-size:
            16px;

        line-height:
            1;

        white-space:
            nowrap;

    }


    .sim-control-date .sim-control-icon {

        z-index:
            2;

    }


    .sim-control-date:focus-within
    .sim-date-display {

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

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

    }


    .sim-control-icon {

        right:
            12px;

        font-size:
            19px;

    }


    .sim-select {

        padding-left:
            38px;

        padding-right:
            38px;

        text-align:
            center;

        text-align-last:
            center;

    }


    /* =====================================================
       TIPO DE VAGA
       DUAS OPÇÕES LADO A LADO
    ===================================================== */

    .sim-field-vaga {

        display:
            grid;

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

        column-gap:
            12px;

        row-gap:
            0;

        margin:
            0;

        padding:
            0
            0
            6px;

    }


    .sim-field-vaga > h2 {

        grid-column:
            1 / -1;

        min-height:
            auto;

        margin:
            0
            0
            18px;

        text-align:
            center;

        font-size:
            23px;

        font-weight:
            700;

        line-height:
            1.15;

    }


    .sim-field-vaga .sim-option {

        min-width:
            0;

        min-height:
            52px;

        margin:
            0;

        padding:
            0;

        gap:
            8px;

        justify-content:
            flex-start;

    }


    .sim-field-vaga .sim-radio {

        width:
            24px;

        height:
            24px;

        flex:
            0
            0
            24px;

    }


    .sim-field-vaga .sim-option-text {

        min-width:
            0;

    }


    .sim-field-vaga .sim-option-text strong {

        font-size:
            15px;

        font-weight:
            600;

        line-height:
            1.15;

    }


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

    .simulator-alert {

        margin:
            16px
            0
            4px;

    }


    /* =====================================================
       RESUMO COMPACTO
       PERÍODO | PIX | CARTÃO
    ===================================================== */

    .summary-box {

        display:
            grid;

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(88px, 1fr)
            );

        gap:
            8px;

        width:
            100%;

        margin:
            20px
            0
            18px;

        padding:
            0;

        border-radius:
            0;

        background:
            transparent;

    }


    .summary-box > h2,
    .summary-box > hr,
    .summary-note {

        display:
            none;

    }


    /*
     * Esconde Entrada, Saída e Vaga no resumo mobile.
     * Mantém somente o Período.
     */
    .summary-box > .summary-row:nth-of-type(1),
    .summary-box > .summary-row:nth-of-type(2),
    .summary-box > .summary-row:nth-of-type(4) {

        display:
            none;

    }


    .summary-box > .summary-row:nth-of-type(3) {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        gap:
            5px;

        min-width:
            0;

        min-height:
            92px;

        margin:
            0;

        padding:
            13px
            12px;

        border:
            1px solid
            #e7e7e7;

        border-radius:
            12px;

        background:
            #fafafa;

        box-shadow:
            none;

    }


    .summary-box > .summary-row:nth-of-type(3) > span {

        color:
            #777777;

        font-size:
            12px;

        font-weight:
            700;

    }


    .summary-box > .summary-row:nth-of-type(3) > strong {

        color:
            #111111;

        font-size:
            16px;

        font-weight:
            800;

        line-height:
            1.15;

    }


    /*
     * Faz os cards de preço participarem diretamente
     * da grade compacta do resumo.
     */
    .summary-pricing {

        display:
            contents;

    }


    .summary-pricing.d-none {

        display:
            none !important;

    }


    .summary-pricing > hr {

        display:
            none;

    }


    .summary-price-option {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        min-width:
            0;

        min-height:
            92px;

        margin:
            0;

        padding:
            13px
            12px;

        border:
            1px solid
            #ffd3bd;

        border-radius:
            12px;

        background:
            #fff9f5;

    }


    .summary-price-title {

        width:
            100%;

    }


    .summary-price-title strong {

        display:
            block;

        color:
            #777777;

        font-size:
            12px;

        font-weight:
            700;

        line-height:
            1.15;

    }


    .summary-price-title small {

        display:
            none;

    }


    /*
     * No card mobile mostramos o valor total,
     * não a referência de diária/pacote.
     */
    .summary-price-values {

        display:
            block;

        width:
            100%;

        margin-top:
            6px;

    }


    .summary-price-values > span:first-child {

        display:
            none;

    }


    .summary-price-values > span:last-child {

        display:
            block;

        width:
            100%;

        font-size:
            0;

        line-height:
            1;

    }


    .summary-price-values > span:last-child strong {

        display:
            block;

        color:
            var(--pp-orange);

        font-size:
            16px;

        font-weight:
            800;

        line-height:
            1.1;

        white-space:
            nowrap;

    }


    /*
     * Encurta "Cartão de Crédito" para "Cartão"
     * apenas nesta apresentação compacta mobile.
     */
    #resumoDescoberta
    .summary-price-option:nth-of-type(2)
    .summary-price-title strong,

    #resumoCoberta
    .summary-price-title strong {

        font-size:
            0;

    }


    #resumoDescoberta
    .summary-price-option:nth-of-type(2)
    .summary-price-title strong::after,

    #resumoCoberta
    .summary-price-title strong::after {

        content:
            "Cartão";

        font-size:
            12px;

        font-weight:
            700;

    }


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

    .btn-continuar-reserva {

        width:
            100%;

        min-height:
            62px;

        margin:
            0
            0
            20px;

        padding:
            10px
            18px;

        justify-content:
            center;

        gap:
            10px;

        border-radius:
            999px;

        text-align:
            center;

    }


    .btn-continuar-reserva > i {

        font-size:
            24px;

    }


    .btn-continuar-reserva span {

        display:
            block;

    }


    .btn-continuar-reserva strong {

        font-size:
            16px;

    }


    .btn-continuar-reserva small {

        display:
            none;

    }


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

    .simulator-rules {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            12px;

        margin-top:
            0;

    }


    .simulator-rule-card {

        padding:
            16px
            16px;

        border-radius:
            12px;

    }


    .simulator-rule-card li {

        font-size:
            13px;

        line-height:
            1.45;

    }


    /*
     * O site WordPress não mostra a linha de segurança
     * nesta composição compacta mobile.
     */
    .simulator-security {

        display:
            none;

    }


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

    .reserva-hero {

        /*
         * Deixa o hero crescer conforme o conteúdo.
         * O espaço inferior é criado no container para que
         * o card sobreposto não cubra nenhum texto.
         */
        min-height:
            0;

        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:
            0;

        padding:
            28px
            22px
            96px;

    }


    .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;

    }


    /* =====================================================
       LOGIN / CADASTRO NO HERO
    ===================================================== */

    .reserva-hero-account {

        top:
            18px;

        right:
            16px;

        gap:
            7px;

    }


    .reserva-account-login,
    .reserva-account-register {

        min-height:
            38px;

        padding:
            0
            12px;

        font-size:
            11px;

    }


    .reserva-account-login span {

        display:
            none;

    }


    .reserva-account-login {

        width:
            38px;

        padding:
            0;

    }


    /* =====================================================
       MODAL DE CONFIRMAÇÃO DA RESERVA
       SOMENTE MOBILE
    ===================================================== */

    body.reserva-modal-aberto {

        overflow:
            hidden;

    }


    .reserva-confirmacao-modal[hidden] {

        display:
            none !important;

    }


    .reserva-confirmacao-modal {

        position:
            fixed;

        inset:
            0;

        z-index:
            99999;

        display:
            flex;

        align-items:
            flex-end;

        justify-content:
            center;

    }


    .reserva-confirmacao-backdrop {

        position:
            absolute;

        inset:
            0;

        background:
            rgba(
                0,
                0,
                0,
                .52
            );

        backdrop-filter:
            blur(2px);

        -webkit-backdrop-filter:
            blur(2px);

    }


    .reserva-confirmacao-sheet {

        position:
            relative;

        z-index:
            1;

        width:
            100%;

        max-width:
            560px;

        max-height:
            88svh;

        overflow-y:
            auto;

        padding:
            26px
            18px
            calc(
                18px +
                env(safe-area-inset-bottom)
            );

        border-radius:
            26px
            26px
            0
            0;

        background:
            #ffffff;

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

    }


    .reserva-confirmacao-handle {

        width:
            38px;

        height:
            4px;

        margin:
            -12px
            auto
            14px;

        border-radius:
            999px;

        background:
            #d7d7d7;

    }


    .reserva-confirmacao-fechar {

        position:
            absolute;

        top:
            16px;

        right:
            16px;

        width:
            38px;

        height:
            38px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            0;

        border:
            0;

        border-radius:
            50%;

        background:
            #f3f3f3;

        color:
            #555555;

        font-size:
            16px;

        cursor:
            pointer;

    }


    .reserva-confirmacao-heading {

        padding-right:
            42px;

    }


    .reserva-confirmacao-heading > span {

        display:
            block;

        margin-bottom:
            6px;

        color:
            var(--pp-orange);

        font-size:
            10px;

        font-weight:
            800;

        letter-spacing:
            1.4px;

    }


    .reserva-confirmacao-heading h2 {

        margin:
            0;

        font-size:
            25px;

        font-weight:
            700;

        line-height:
            1.1;

    }


    .reserva-confirmacao-heading p {

        margin:
            7px
            0
            0;

        color:
            #777777;

        font-size:
            12px;

        line-height:
            1.4;

    }


    .reserva-confirmacao-dados {

        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            8px;

        margin-top:
            20px;

    }


    .reserva-confirmacao-dados > div {

        min-width:
            0;

        min-height:
            70px;

        padding:
            12px;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            5px;

        border:
            1px solid
            #ececec;

        border-radius:
            11px;

        background:
            #f8f8f8;

    }


    .reserva-confirmacao-dados span {

        color:
            #9a9a9a;

        font-size:
            9px;

        font-weight:
            800;

        letter-spacing:
            .8px;

    }


    .reserva-confirmacao-dados strong {

        min-width:
            0;

        color:
            #222222;

        font-size:
            12px;

        font-weight:
            700;

        line-height:
            1.3;

        overflow-wrap:
            anywhere;

    }


    .reserva-confirmacao-precos {

        display:
            grid;

        gap:
            8px;

        margin-top:
            10px;

    }


    .reserva-confirmacao-preco {

        min-height:
            64px;

        padding:
            11px
            13px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            12px;

        border:
            1px solid
            #ececec;

        border-radius:
            11px;

        background:
            #ffffff;

    }


    .reserva-confirmacao-preco > div {

        min-width:
            0;

        display:
            flex;

        flex-direction:
            column;

        gap:
            2px;

    }


    .reserva-confirmacao-preco strong {

        color:
            #222222;

        font-size:
            13px;

        font-weight:
            800;

    }


    .reserva-confirmacao-preco small {

        color:
            #8b8b8b;

        font-size:
            10px;

    }


    .reserva-confirmacao-preco > span {

        flex:
            0
            0
            auto;

        color:
            var(--pp-orange);

        font-size:
            18px;

        font-weight:
            800;

        white-space:
            nowrap;

    }


    .reserva-confirmacao-avancar {

        width:
            100%;

        min-height:
            56px;

        margin-top:
            14px;

        padding:
            0
            20px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            10px;

        border:
            0;

        border-radius:
            999px;

        background:
            var(--pp-orange);

        color:
            #ffffff;

        font-size:
            15px;

        font-weight:
            800;

        cursor:
            pointer;

    }


    .reserva-confirmacao-avancar:active {

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

    }


    .reserva-confirmacao-corrigir {

        width:
            100%;

        margin-top:
            12px;

        padding:
            6px
            12px;

        border:
            0;

        background:
            transparent;

        color:
            #777777;

        font-size:
            12px;

        text-decoration:
            underline;

        cursor:
            pointer;

    }

    /* =========================================
       MENU DO CLIENTE - SOMENTE MOBILE
    ========================================= */
    .reserva-cliente-menu {
       right: 0;
       width: 220px;
       max-width: calc(100vw - 32px);
    }

    .reserva-cliente-toggle {
       width: auto;
       white-space: nowrap;
    }

    .reserva-hero-account .reserva-cliente-toggle span {
       display: inline-block;
    }

}


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

@media (
    max-width: 390px
) {

    .container {

        padding:
            0
            10px;

    }


    .simulator-card {

        padding:
            22px
            12px
            24px;

    }


    .simulator-heading h1 {

        font-size:
            24px;

    }


    .simulator-heading p {

        font-size:
            14px;

    }


    .sim-field-group:not(.sim-field-vaga) {

        column-gap:
            8px;

    }


    .sim-field-group:not(.sim-field-vaga) > h2,
    .sim-field-vaga > h2 {

        font-size:
            21px;

    }


    .sim-input {

        height:
            52px;

        padding-left:
            10px;

        padding-right:
            36px;

        font-size:
            15px;

    }


    .sim-control-date {

        height:
            52px;

    }


    .sim-control-date .sim-date-display {

        height:
            52px;

        padding-left:
            10px;

        padding-right:
            36px;

        font-size:
            15px;

    }


    .sim-control-icon {

        right:
            10px;

        font-size:
            18px;

    }


    .sim-field-vaga {

        column-gap:
            8px;

    }


    .sim-field-vaga .sim-option {

        gap:
            7px;

    }


    .sim-field-vaga .sim-option-text strong {

        font-size:
            14px;

    }


    .summary-box {

        gap:
            6px;

    }


    .summary-box > .summary-row:nth-of-type(3),
    .summary-price-option {

        min-height:
            86px;

        padding:
            11px
            9px;

    }


    .summary-box > .summary-row:nth-of-type(3) > span,
    .summary-price-title strong,
    #resumoDescoberta
    .summary-price-option:nth-of-type(2)
    .summary-price-title strong::after,
    #resumoCoberta
    .summary-price-title strong::after {

        font-size:
            11px;

    }


    .summary-box > .summary-row:nth-of-type(3) > strong,
    .summary-price-values > span:last-child strong {

        font-size:
            14px;

    }


    .reserva-confirmacao-sheet {

        padding-left:
            14px;

        padding-right:
            14px;

    }


    .reserva-confirmacao-heading h2 {

        font-size:
            23px;

    }


    .reserva-confirmacao-dados strong {

        font-size:
            11px;

    }


    .reserva-confirmacao-preco > span {

        font-size:
            16px;

    }

}