{"id":157,"date":"2026-04-12T01:26:14","date_gmt":"2026-04-12T01:26:14","guid":{"rendered":"http:\/\/104.237.131.19\/checkout\/"},"modified":"2026-04-12T01:26:14","modified_gmt":"2026-04-12T01:26:14","slug":"checkout","status":"publish","type":"page","link":"https:\/\/costaricarentals.casa\/es\/checkout\/","title":{"rendered":"Finalizar compra"},"content":{"rendered":"\n<style>\n    \/* =========================================\n       1. ESTILOS BASE\n       ========================================= *\/\n    body, #content, .site-content { background-color: #f7f9fc !important; font-family: 'Inter', 'Roboto', Helvetica, Arial, sans-serif !important; }\n\n    #checkout-container {\n        padding-top: 40px; padding-bottom: 100px;\n        width: 84vw !important; max-width: 1800px !important; \n        position: relative !important; left: 50% !important; right: 50% !important;\n        margin-left: -42vw !important; margin-right: -42vw !important;\n        box-sizing: border-box !important;\n    }\n    \n    @media (max-width: 991px) {\n        #checkout-container { width: 100% !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; padding-left:5px !important; padding-right:5px !important; }\n        .checkout-flex-row { display: block; }\n        .col-main-checkout, .col-sidebar-checkout { width: 100% !important; }\n        .col-sidebar-checkout { display: none !important; } \/* Esconde sidebar antiga no mobile *\/\n    }\n\n    @media (min-width: 992px) {\n        .checkout-flex-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 50px; }\n        .col-main-checkout { flex: 1 !important; min-width: 0; order: 1; }\n        .col-sidebar-checkout { width: 420px !important; flex: 0 0 420px !important; order: 2; position: sticky; top: 30px; }\n    }\n\n    \/* Estilos Gerais Paineis *\/\n    #checkout-container .panel, #checkout-container .panel-default, #checkout-container .well, .booking-info-strip, .hero-cancellation, .mobile-summary-accordion .panel {\n        border: 1px solid #e1e4e8 !important; background-color: #ffffff !important; box-shadow: 0 3px 10px rgba(0,0,0,0.02) !important; border-radius: 8px !important; margin-bottom: 15px !important; \n    }\n    #checkout-container .panel-body, #checkout-container .reservation-summary-content { padding: 40px !important; }\n\n    \/* --- SIDEBAR PREMIUM DESIGN --- *\/\n    .reservation-summary {\n        background: #fff;\n        border-radius: 12px;\n        border: none !important;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;\n        overflow: hidden;\n    }\n    \n    .reservation-summary-header {\n        background-color: #fff !important;\n        border-bottom: 1px solid #f0f0f0 !important;\n        color: #333 !important;\n        padding: 25px 30px !important;\n        font-size: 16px !important;\n        font-weight: 800 !important;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n    }\n\n    \/* PADDING da Sidebar - Ajustado para dar espa\u00e7o entre a linha e a imagem (15px top) *\/\n    #checkout-container .reservation-summary-content { padding: 15px 30px 30px 30px !important; }\n\n    \/* Ajuste para garantir que a imagem n\u00e3o tenha margem extra no topo *\/\n    .reservation-summary-content .details > .row:first-child {\n        margin-top: 0px !important; \n    }\n\n    \/* Imagem *\/\n    .reservation-summary img { \n        border-radius: 8px !important; \n        width: 100% !important; \n        margin-bottom: 5px !important; \n        box-shadow: 0 4px 10px rgba(0,0,0,0.05); \n    }\n\n    \/* FIX: Divisor (Linha que n\u00e3o corta) *\/\n    \/* MODIFICADO: Margem inferior reduzida de 20px para 5px para subir o Rent no Desktop *\/\n    .sidebar-divider {\n        height: 1px;\n        background-color: #e0e0e0;\n        margin: 15px 0 5px 0; \n        width: 100%;\n        display: block;\n        clear: both !important; \/* Garante que limpa floats *\/\n        position: relative !important; \/* Posicionamento relativo *\/\n        z-index: 2 !important; \/* Garante que fica acima de elementos expandidos *\/\n    }\n\n    \/* NOME DA CASA (20px) *\/\n    .unit-name-premium {\n        font-size: 20px !important;\n        color: #F56E00 !important;\n        font-weight: 800 !important;\n        line-height: 1.1 !important;\n        display: block;\n        margin-top: 5px !important; \n        margin-bottom: 0 !important; \n    }\n\n    \/* Tabela *\/\n    #checkout-container .reservation-summary .table, \n    #checkout-container .reservation-summary .table-bordered { \n        border: none !important; width: 100% !important; margin-bottom: 0 !important; \n    }\n    \n    \/* Linhas da Tabela *\/\n    #checkout-container .reservation-summary .table td {\n        border: none !important;\n        border-bottom: 1px dashed #e0e0e0 !important;\n        padding: 12px 0 !important;\n        font-size: 14px;\n        color: #555;\n        vertical-align: middle !important;\n    }\n    #checkout-container .reservation-summary .table tr:last-child td { border-bottom: none !important; }\n\n    \/* T\u00edtulos de Se\u00e7\u00e3o (Optional Fees, Taxes, etc.) *\/\n    .col-sidebar-checkout h4, .col-sidebar-checkout p strong.pull-right {\n        font-size: 12px !important;\n        text-transform: uppercase !important;\n        color: #aaa !important;\n        font-weight: 800 !important;\n        margin-top: 10px !important; \n        display: block;\n        letter-spacing: 1px;\n    }\n    \n    \/* Ocultar titulo duplicado *\/\n    .col-sidebar-checkout .optional_fees_wrapper h3,\n    .mobile-summary-accordion .optional_fees_wrapper h3 {\n        display: none !important;\n    }\n\n    \/* Valores *\/\n    .pull-right, .text-right { font-weight: 700; color: #222; }\n\n    \/* --- AJUSTES DO SUBTOTAL --- *\/\n    #checkout-container .reservation-summary .table tr:first-child {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 20px;\n        width: 100%;\n        border-bottom: 1px dashed #e0e0e0;\n        padding: 12px 0;\n        margin-top: -10px;\n        position: relative;\n        z-index: 1;\n    }\n    #checkout-container .reservation-summary .table tr:first-child td {\n        border-bottom: none !important;\n        padding: 0 !important;\n        width: auto !important;\n        display: block;\n    }\n\n    \/* --- AJUSTES DO TOTAL --- *\/\n    .total-wrapper-premium {\n        border-top: 1px dashed #e0e0e0; \n        margin-top: 5px;    \n        padding-top: 10px; \n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        width: 100%;\n        margin-bottom: 5px;\n    }\n    .total-label-premium {\n        font-size: 20px;\n        font-weight: 900;\n        color: #222;\n        text-transform: uppercase;\n    }\n    .total-value-premium {\n        font-size: 26px;\n        font-weight: 900;\n        color: #F56E00;\n    }\n    \n    \/* ESTILO NOVO PARA RENT E TAXES (SUAVE) *\/\n    .premium-soft-row {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 5px 0;\n        margin-bottom: 2px;\n    }\n    .premium-soft-label {\n        font-size: 12px;\n        font-weight: 600; \/* Peso m\u00e9dio, n\u00e3o bold *\/\n        color: #666; \/* Cinza suave *\/\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n    }\n    .premium-soft-value {\n        font-size: 14px;\n        font-weight: 600;\n        color: #444; \/* Cinza escuro, n\u00e3o preto puro *\/\n    }\n\n    \/* Bot\u00e3o View Details *\/\n    .btn-price-breakdown {\n        background: none !important; border: none !important; color: #888 !important; text-decoration: underline !important;\n        font-size: 12px !important; padding: 0 !important; margin-left: 10px; outline: none !important;\n    }\n    .btn-price-breakdown:hover { color: #F56E00 !important; }\n    .btn-price-breakdown i { display: none; }\n\n    \/* --- FIM SIDEBAR PREMIUM --- *\/\n\n    \/* Cabe\u00e7alhos Desktop *\/\n    #checkout-container .panel-heading {\n        background-color: #fff !important; border-bottom: 1px solid #f0f0f0 !important; color: #333 !important; padding: 20px 40px !important; display: flex !important; align-items: center !important; width: 100% !important; cursor: pointer !important; transition: background-color 0.2s; position: relative; z-index: 10;\n    }\n    #checkout-container .panel-heading:hover { background-color: #fcfcfc !important; }\n    #checkout-container .panel-title { font-weight: 700 !important; text-transform: uppercase !important; font-size: 16px !important; color: #444 !important; margin: 0 !important; display: flex !important; align-items: center !important; padding-left: 0 !important; letter-spacing: 0.5px; width:100%; pointer-events: none; }\n\n    .step-number { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: #F56E00 !important; color: white !important; border-radius: 50% !important; width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: 15px !important; font-weight: 700 !important; margin-right: 15px !important; line-height: 1 !important; }\n    #checkout-container .step { display: none !important; }\n    \n    \/* HERO & ICONES *\/\n    .hero-cancellation { background: linear-gradient(135deg, #F56E00 0%, #ff9f4d 100%) !important; color: white !important; padding: 20px 40px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; box-shadow: 0 5px 15px rgba(245, 110, 0, 0.15) !important; border: none !important; text-align: left !important; }\n    .hero-content { text-align: left !important; padding-left: 0 !important; }\n    .hero-content h3 { margin: 0 0 3px !important; font-size: 19px !important; font-weight: 700 !important; color: white !important; }\n    .hero-content p { margin: 0 !important; opacity: 0.95 !important; font-size: 14px !important; color: white !important; }\n    .hero-icon { font-size: 22px !important; margin-right: 20px !important; background: rgba(255,255,255,0.25) !important; width: 45px !important; height: 45px !important; min-width: 45px !important; display: flex !important; align-items: center !important; justify-content: center; border-radius: 50% !important; color: #fff !important; }\n\n    \/* ICONE DE PROTE\u00c7\u00c3O *\/\n    .protection-icon { color: #F56E00 !important; font-size: 55px !important; margin-right: 20px !important; float: none !important; vertical-align: middle !important; }\n    .travel-heading { display: flex !important; align-items: center !important; margin-top: 0 !important; margin-bottom: 15px !important; font-weight: 700 !important; font-size: 17px !important; text-transform: uppercase; color: #444; }\n\n    #checkout-container .form-control { height: 50px !important; border-radius: 6px !important; border: 1px solid #e0e0e0 !important; background-color: #fff !important; padding-left: 15px !important; font-size: 15px !important; box-shadow: none !important; color: #333 !important; transition: border-color 0.2s; width: 100% !important; }\n    #checkout-container .form-control:focus { border-color: #F56E00 !important; }\n    #checkout-container label { color: #888 !important; font-weight: 600 !important; font-size: 11px !important; text-transform: uppercase !important; margin-bottom: 5px !important; display: block !important; letter-spacing: 0.5px; }\n\n    #checkout-container .btn-primary, #checkout-container .btn-green, #checkout-container button[type=\"submit\"] {\n        background-color: #F56E00 !important; border-color: #F56E00 !important; color: white !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 13px !important;\n        padding: 12px 0 !important; width: 160px !important; border-radius: 6px !important;\n        box-shadow: 0 4px 10px rgba(245, 110, 0, 0.2) !important; transition: all 0.3s !important; background-image: none !important;\n    }\n    #checkout-container .btn-primary:hover, .btn-green:hover { background-color: #e36d0e !important; transform: translateY(-1px) !important; }\n\n    \/* FIX: BOT\u00c3O CHECKOUT *\/\n    #checkout-container #btn-checkout {\n        width: auto !important;             \n        max-width: 100% !important;\n        min-width: 300px !important;        \n        display: block !important;\n        margin: 20px auto 0 auto !important; \n        font-size: 16px !important;\n        padding: 15px 60px !important;       \n        border-radius: 4px;\n        float: none !important;\n    }\n    \n    \/* ESPA\u00c7AMENTO DA \u00c1REA DE PAGAMENTO *\/\n    .payment-footer-row {\n        margin-top: 20px !important;        \n        text-align: center !important;       \n        clear: both !important;             \n        width: 100%;\n        display: block;\n    }\n    \n    \/* Centralizar checkbox dos termos *\/\n    .payment-footer-row .checkbox {\n        text-align: center;\n        display: block;\n        margin-bottom: 5px !important;\n        margin-top: 0px !important;\n    }\n    \n    \/* Garante centraliza\u00e7\u00e3o na coluna do bootstrap *\/\n    .payment-footer-row .col-xs-12 {\n        text-align: center !important;\n        float: none !important;\n        margin: 0 auto;\n        width: 100% !important; \n    }\n\n    .booking-info-strip { display: flex; justify-content: space-between; background: #fff; padding: 20px 0 !important; }\n    .info-strip-item { text-align: center; flex: 1; border-right: 1px solid #f0f0f0; padding: 0 10px; }\n    .info-strip-item:last-child { border-right: none; }\n    .strip-label { display: block; font-size: 11px; text-transform: uppercase; color: #bbb; font-weight: 700; margin-bottom: 4px; letter-spacing: 1px; }\n    .strip-value { font-size: 16px; font-weight: 700; color: #333; }\n\n    .plan_details_description { margin-left: 0 !important; color: #666; font-size: 13px; line-height: 1.5; padding-left: 5px; }\n    \n    \/* =========================================\n       2. DESIGN \"PREMIUM MOBILE\"\n       ========================================= *\/\n    @media (max-width: 991px) {\n        #checkout-container .panel-heading {\n            padding: 20px 55px 20px 20px !important; background-color: #fff !important;\n            cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; position: relative;\n        }\n        \n        #checkout-container .panel-heading:hover, \n        #checkout-container .panel-heading:focus, \n        #checkout-container .panel-heading:active { background-color: #fff !important; color: #333 !important; outline: none !important; }\n\n        .panel-group .panel {\n            border: none !important; box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important; border-radius: 16px !important; margin-bottom: 25px !important; background: #fff !important; overflow: hidden;\n        }\n\n        #checkout-container .panel-heading::after {\n            content: '\\f078'; font-family: 'FontAwesome'; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); color: #ccc; transition: transform 0.3s;\n        }\n        #checkout-container .panel-heading.mobile-active::after { transform: translateY(-50%) rotate(180deg); color: #F56E00; }\n\n        #checkout-container .panel-body { padding: 25px !important; background-color: #fff !important; }\n        \n        .mobile-summary-title { \n            display: flex !important; justify-content: space-between !important; width: 100% !important; align-items: center !important; \n            font-size: 15px !important; margin: 0 !important; pointer-events: none; font-weight: 700 !important; text-transform: uppercase; color: #444;\n        }\n        .mobile-total-preview { font-size: 16px !important; color: #F56E00 !important; font-weight: 800 !important; }\n\n        .mobile-receipt-row {\n            display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px dashed #e0e0e0; font-size: 14px; color: #555;\n        }\n        \n        .mobile-receipt-label { width: 70%; padding-right: 10px; text-align: left; line-height: 1.3; font-weight: 500; }\n        .mobile-receipt-value { width: 30%; text-align: right; font-weight: 700; color: #333; white-space: nowrap; }\n        .mobile-receipt-header { font-size: 12px; text-transform: uppercase; color: #aaa; font-weight: 800; margin-top: 20px; margin-bottom: 5px; letter-spacing: 1px; }\n\n        .mobile-receipt-total {\n            background-color: #333; color: white; padding: 20px; border-radius: 12px; margin-top: 25px; display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 700; box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n        }\n        \n        .mobile-receipt-due {\n            margin-top: 15px; text-align: center; font-size: 14px; color: #27ae60; font-weight: 700; background: #f0f9f4; padding: 10px; border-radius: 8px;\n        }\n\n        \/* FIX: Garante alinhamento central do container no mobile *\/\n        .payment-footer-row, .payment-footer-row .col-xs-12 {\n            text-align: center !important;\n        }\n\n        \/* FIX: Bot\u00e3o Centralizado (auto) + Margem Inferior (30px) *\/\n        #checkout-container #btn-checkout {\n            margin: 20px auto 30px auto !important; \n        }\n    }\n\n\n.optional-addons-intro {\n    color: #5a5a5a;\n    font-size: 15px;\n    line-height: 1.5;\n    margin: 0 0 22px 0;\n    padding: 14px 16px;\n    background: #f5f7fb;\n    border-left: 4px solid #f56e00;\n    border-radius: 6px;\n}\n.panel-step-2 .opt-fee-item .row-fee {\n    padding: 18px 20px;\n    margin: 12px 0;\n    background: #fff;\n    border: 1px solid #e6e8eb;\n    border-radius: 10px;\n    transition: border-color 0.2s, box-shadow 0.2s;\n}\n.panel-step-2 .opt-fee-item .row-fee:hover {\n    border-color: #f56e00;\n    box-shadow: 0 4px 12px rgba(245,110,0,0.08);\n}\n.panel-step-2 .opt-fee-name {\n    font-weight: 600 !important;\n    font-size: 16px !important;\n    color: #0b2b56 !important;\n    margin-left: 8px;\n    cursor: pointer;\n}\n.panel-step-2 .opt-fee-desc {\n    color: #6b7280;\n    font-size: 13px;\n    margin: 6px 0 0 28px;\n    line-height: 1.45;\n}\n.panel-step-2 .opt-fee-price {\n    font-weight: 700;\n    color: #0b2b56;\n    font-size: 16px;\n}\n.panel-step-2 input[type=\"checkbox\"].optional_fee {\n    width: 18px;\n    height: 18px;\n    accent-color: #f56e00;\n    vertical-align: middle;\n    cursor: pointer;\n}\n.panel-step-2 .row-border { display: none; }\n\/* esconde Travel Insurance + Damage Protection wells da secao *\/\n.panel-step-2 .well-insurance { display: none !important; }\n\n\n\n.panel-step-2 .opt-fee-desc { display: none !important; }\n.panel-step-2 .infoFee { display: none !important; }\n.panel-step-2 .opt-fee-item .opt-fee {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n.panel-step-2 .opt-fee-item .col-sm-8.col-xs-7 {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n.panel-step-2 .opt-fee-name {\n    margin-left: 0 !important;\n    text-transform: capitalize;\n}\n\n\n\n.panel-step-2 .opt-fee-item .row-fee { display: flex; align-items: center; gap: 0; }\n.panel-step-2 .opt-fee-item .col-md-10,\n.panel-step-2 .opt-fee-item .col-sm-9,\n.panel-step-2 .opt-fee-item .col-md-2,\n.panel-step-2 .opt-fee-item .col-sm-3 { float: none; }\n.panel-step-2 .opt-fee {\n    display: flex !important;\n    align-items: center !important;\n    width: 100%;\n}\n.panel-step-2 .opt-fee .col-sm-8,\n.panel-step-2 .opt-fee .col-xs-7 {\n    display: flex !important;\n    align-items: center !important;\n    gap: 10px !important;\n    padding: 0 !important;\n    width: auto !important;\n    flex: 1;\n}\n.panel-step-2 .opt-fee-name {\n    text-transform: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    line-height: 1 !important;\n    font-size: 15px !important;\n    font-weight: 600 !important;\n    color: #0b2b56 !important;\n    cursor: pointer;\n    display: inline-block !important;\n}\n.panel-step-2 input[type=\"checkbox\"].optional_fee {\n    margin: 0 !important;\n    vertical-align: middle !important;\n    flex-shrink: 0;\n}\n\n\n\/* CASAGO PATCH v4: Optional Add-ons \u2014 layout limpo e definitivo *\/\n.optional-addons-intro {\n    color: #5a5a5a;\n    font-size: 15px;\n    line-height: 1.5;\n    margin: 0 0 22px 0;\n    padding: 14px 16px;\n    background: #f5f7fb;\n    border-left: 4px solid #f56e00;\n    border-radius: 6px;\n}\n.panel-step-2 .well-insurance { display: none !important; }\n.panel-step-2 .opt-fee-desc,\n.panel-step-2 .infoFee,\n.panel-step-2 .amenity_img,\n.panel-step-2 .row-border { display: none !important; }\n\n.panel-step-2 .opt-fee-item .row-fee {\n    padding: 16px 20px;\n    margin: 12px 0;\n    background: #fff;\n    border: 1px solid #e6e8eb;\n    border-radius: 10px;\n    display: flex !important;\n    align-items: center !important;\n    flex-wrap: nowrap !important;\n    transition: border-color 0.2s, box-shadow 0.2s;\n}\n.panel-step-2 .opt-fee-item .row-fee:hover {\n    border-color: #f56e00;\n    box-shadow: 0 4px 12px rgba(245,110,0,0.08);\n}\n.panel-step-2 .opt-fee-item .row-fee > .col-md-10,\n.panel-step-2 .opt-fee-item .row-fee > .col-sm-9,\n.panel-step-2 .opt-fee-item .row-fee > .col-xs-12,\n.panel-step-2 .opt-fee-item .row-fee > .col-md-2,\n.panel-step-2 .opt-fee-item .row-fee > .col-sm-3 {\n    float: none !important;\n    width: auto !important;\n    padding: 0 !important;\n}\n.panel-step-2 .opt-fee-item .row-fee > .col-md-10 { flex: 1; }\n.panel-step-2 .opt-fee-item .row-fee > .col-md-2 { margin-left: auto; }\n\n.panel-step-2 .opt-fee {\n    display: flex !important;\n    align-items: center !important;\n    flex-wrap: nowrap !important;\n    margin: 0 !important;\n    width: 100%;\n}\n.panel-step-2 .opt-fee > .col-sm-8,\n.panel-step-2 .opt-fee > .col-xs-7 {\n    flex: 1 !important;\n    width: auto !important;\n    padding: 0 !important;\n    float: none !important;\n    display: flex !important;\n    align-items: center !important;\n    gap: 12px !important;\n}\n.panel-step-2 .opt-fee > .col-sm-4,\n.panel-step-2 .opt-fee > .col-xs-5 {\n    width: auto !important;\n    padding: 0 !important;\n    float: none !important;\n}\n\n.panel-step-2 input[type=\"checkbox\"].optional_fee {\n    width: 18px !important;\n    height: 18px !important;\n    margin: 0 !important;\n    accent-color: #f56e00;\n    vertical-align: middle !important;\n    flex-shrink: 0 !important;\n    cursor: pointer;\n    position: relative !important;\n    opacity: 1 !important;\n}\n.panel-step-2 .opt-fee-name {\n    text-transform: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    line-height: 1.2 !important;\n    font-size: 15px !important;\n    font-weight: 600 !important;\n    color: #0b2b56 !important;\n    cursor: pointer;\n    display: inline-block !important;\n    white-space: normal !important;\n    flex: 1;\n    position: relative;\n    top: 2px;\n}\n.panel-step-2 .opt-fee-price {\n    font-weight: 700;\n    color: #0b2b56;\n    font-size: 16px;\n    white-space: nowrap;\n}\n\n\n\/* CASAGO PATCH: Terms and Policies panel *\/\n.casago-terms-panel .panel-body { padding: 24px 28px !important; }\n.casago-terms-title {\n    text-align: center !important;\n    color: #0b2b56 !important;\n    font-weight: 700 !important;\n    font-size: 22px !important;\n    margin: 0 0 24px 0 !important;\n    text-transform: none !important;\n}\n.casago-terms-section { margin-bottom: 18px; }\n.casago-terms-section h4 {\n    color: #0b2b56;\n    font-weight: 700;\n    font-size: 16px;\n    margin: 0 0 10px 0;\n    text-transform: none !important;\n}\n.casago-terms-section p {\n    color: #4b5563;\n    font-size: 14px;\n    line-height: 1.55;\n    margin: 0 0 12px 0;\n}\n.casago-terms-section ul {\n    padding-left: 22px;\n    margin: 0 0 12px 0;\n}\n.casago-terms-section ul li {\n    color: #4b5563;\n    font-size: 14px;\n    line-height: 1.55;\n    margin-bottom: 6px;\n}\n.casago-terms-callout {\n    background: #fff7ed;\n    border-left: 4px solid #f56e00;\n    color: #4b5563;\n    font-size: 14px;\n    line-height: 1.55;\n    padding: 12px 14px;\n    border-radius: 6px;\n    margin: 0 0 18px 0;\n}\n.casago-terms-callout strong { color: #0b2b56; }\n.casago-terms-link-wrap { text-align: center; margin: 0 0 20px 0; }\n.casago-terms-link {\n    color: #0b2b56;\n    font-weight: 600;\n    text-decoration: underline;\n    text-transform: none !important;\n    font-size: 14px;\n}\n.casago-terms-link:hover { color: #f56e00; }\n.casago-terms-checks {\n    border-top: 1px solid #e6e8eb;\n    padding-top: 18px;\n}\n.casago-terms-check {\n    display: flex !important;\n    align-items: flex-start !important;\n    gap: 23px !important;\n    margin: 0 0 12px 0 !important;\n    cursor: pointer;\n    font-weight: 500 !important;\n    text-transform: none !important;\n    font-size: 14px !important;\n    color: #292929 !important;\n    letter-spacing: normal !important;\n}\n.casago-terms-check input[type=\"checkbox\"] {\n    width: 18px !important;\n    height: 18px !important;\n    margin: 0 !important;\n    accent-color: #f56e00;\n    flex-shrink: 0;\n    cursor: pointer;\n}\n.casago-terms-check span {\n    flex: 1;\n    line-height: 1.5;\n    position: relative;\n    top: -4px;\n}\n.casago-terms-check a {\n    color: #f56e00;\n    text-decoration: underline;\n    font-weight: 600;\n}\n<\/style>\n<script>\n\/\/ CASAGO PATCH: cupom inicial vindo da pagina de propriedade\nwindow.__CASAGO_INITIAL_COUPON__ = \"\";\n(function(){\n    function applyInitialCoupon() {\n        var code = window.__CASAGO_INITIAL_COUPON__;\n        if (!code) return;\n        var input = document.querySelector(\"input[name=\\\"promo_code\\\"]\");\n        if (!input) { setTimeout(applyInitialCoupon, 500); return; }\n        try {\n            var scope = angular.element(input).scope();\n            if (scope && scope.checkout) {\n                if (scope.reservationDetails && scope.reservationDetails.coupon_discount > 0) return;\n                scope.checkout.promo_code = code;\n                if (typeof scope.getPreReservation === \"function\") {\n                    scope.$apply(function(){\n                        scope.getPreReservation();\n                    });\n                }\n                return;\n            }\n        } catch(e){}\n        \/\/ Fallback\n        input.value = code;\n        input.dispatchEvent(new Event(\"input\", {bubbles:true}));\n        input.dispatchEvent(new Event(\"change\", {bubbles:true}));\n        var btn = input.parentElement && input.parentElement.querySelector(\"button\");\n        if (btn) btn.click();\n    }\n    document.addEventListener(\"DOMContentLoaded\", function(){\n        setTimeout(applyInitialCoupon, 1500);\n        setTimeout(applyInitialCoupon, 3500);\n    });\n})();\n<\/script>\n\n<script>\n\/\/ CASAGO PATCH: auto-apply coupon from URL parameter\n(function(){\n    function getQueryParam(name) {\n        var url = new URL(window.location.href);\n        return url.searchParams.get(name);\n    }\n    function applyCoupon() {\n        var code = getQueryParam(\"promo_code\") || getQueryParam(\"coupon\") || getQueryParam(\"coupon_code\");\n        if (!code) return;\n\n        var input = document.querySelector(\"input[name=\\\"promo_code\\\"]\");\n        if (!input) { setTimeout(applyCoupon, 500); return; }\n\n        \/\/ Verifica se ja tem desconto aplicado (campo escondido por ng-if)\n        try {\n            var scope = angular.element(input).scope();\n            if (scope && scope.checkout) {\n                if (scope.reservationDetails && scope.reservationDetails.coupon_discount > 0) return;\n                scope.checkout.promo_code = code;\n                if (typeof scope.getPreReservation === \"function\") {\n                    scope.$apply(function(){\n                        scope.getPreReservation();\n                    });\n                }\n            }\n        } catch(e) {\n            \/\/ Fallback: simula digitacao + clique\n            input.value = code;\n            input.dispatchEvent(new Event(\"input\", {bubbles:true}));\n            input.dispatchEvent(new Event(\"change\", {bubbles:true}));\n            var btn = input.parentElement.querySelector(\"button\");\n            if (btn) btn.click();\n        }\n    }\n    document.addEventListener(\"DOMContentLoaded\", function(){\n        setTimeout(applyCoupon, 1500);\n        setTimeout(applyCoupon, 3000);\n    });\n})();\n<\/script>\n\n<script>\n\/\/ CASAGO PATCH: filter para traduzir nomes de optional fees do espanhol pro ingles\n(function(){\n    if (typeof angular === \"undefined\") return;\n    var mod = null;\n    try { mod = angular.module(\"resortpro\"); } catch(e){ try { mod = angular.module(\"ResortPro\"); } catch(e2){} }\n    if (!mod) {\n        document.addEventListener(\"DOMContentLoaded\", function(){\n            try {\n                var injector = angular.element(document.body).injector();\n                if (injector) {\n                    var $filter = injector.get(\"$filter\");\n                    \/\/ o filter sera definido inline abaixo\n                }\n            } catch(e){}\n        });\n    }\n    \/\/ Mapa de traducoes (lowercase keys)\n    var map = {\n        \"todo incluido\": \"All-inclusive\",\n        \"todo incluido en bw\": \"All-inclusive\"\n    };\n    function tr(name) {\n        if (!name) return name;\n        var lang = (document.documentElement.lang||\"\").toLowerCase();\n        if (lang.indexOf(\"es\") === 0) return name; \/\/ mantem em ES\n        var k = String(name).trim().toLowerCase();\n        return map[k] || name;\n    }\n    \/\/ Registra o filter quando o angular carregar\n    function register() {\n        try {\n            var mods = [\"resortpro\",\"ResortPro\",\"app\",\"resortApp\"];\n            for (var i=0; i<mods.length; i++){\n                try {\n                    angular.module(mods[i]).filter(\"translateFeeName\", function(){\n                        return tr;\n                    });\n                    return true;\n                } catch(e){}\n            }\n        } catch(e){}\n        return false;\n    }\n    if (!register()) {\n        setTimeout(register, 500);\n        setTimeout(register, 1500);\n    }\n    \/\/ Tambem substitui o texto diretamente apos o DOM renderizar\n    function replaceLabels() {\n        document.querySelectorAll(\".opt-fee-name, .premium-soft-label\").forEach(function(el){\n            var orig = el.textContent.trim();\n            var translated = tr(orig);\n            if (translated !== orig) el.textContent = translated;\n        });\n    }\n    document.addEventListener(\"DOMContentLoaded\", function(){\n        replaceLabels();\n        setTimeout(replaceLabels, 1000);\n        setTimeout(replaceLabels, 2500);\n        \/\/ Observer pra capturar mudancas dinamicas\n        if (window.MutationObserver) {\n            var obs = new MutationObserver(function(){ replaceLabels(); });\n            obs.observe(document.body, {childList: true, subtree: true, characterData: true});\n            setTimeout(function(){ obs.disconnect(); }, 10000);\n        }\n    });\n})();\n<\/script>\n\n\n<div id=\"checkout-container\" class=\"content-area\" ng-controller=\"CheckoutController as cCtrl\">\n  <div ng-init=\"hash='';referrer_url='https:\/\/costaricarentals.casa\/es\/checkout\/';unit_id='';location_id='';condo_type_id='';unit_name='';isCheckout=true;advanced_reservations=0;advanced_reservations_date='';current_date='26\/05\/2026';useStreamShare='';aptexx_gateway_id=''\">\n    <main id=\"main\" class=\"site-main\" role=\"main\" ng-init=\"initCheckout()\">\n\n              <div class=\"alert alert-danger\">This form is being submitted insecurely.<\/div>\n            <div class=\"alert alert-danger\" ng-show=\"error\" ng-cloak ng-bind=\"errorMessage\"><\/div>\n      \n                <div class=\"alert alert-danger\"><p>This unit is not availabile for online booking.<\/p><\/div>\n          <\/main>\n  <\/div>\n  \n  <div class=\"modal fade\" id=\"myModal\" ng-init=\"getTermsAndConditions()\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;<\/span><\/button><h4 class=\"modal-title\">Terms &amp; Conditions<\/h4><\/div><div class=\"modal-body\"><div ng-bind-html=\"terms\"><\/div><\/div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close<\/button><\/div><\/div><\/div><\/div>\n  <div class=\"modal fade\" id=\"modalPrivacy\" ng-init=\"getPrivacyPolicy()\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;<\/span><\/button><h4 class=\"modal-title\">Privacy Policy<\/h4><\/div><div class=\"modal-body\"><div class=\"policy_and_privacy\" ng-bind-html=\"privacyPolicyHtml\"><\/div><\/div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close<\/button><\/div><\/div><\/div><\/div>\n  <div class=\"modal fade\" id=\"modalAmenities\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;<\/span><\/button><h4 class=\"modal-title\">Add Ons<\/h4><\/div><div class=\"modal-body\"><div class=\"alert alert-info\">Select item(s) and the quantity then press Add To Reservation<\/div><table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" class=\"table table-striped table-condensed table-bordered\"><thead><tr><th>Item Name \/ Description<\/th><th>Qty.<\/th><th>Price<\/th><\/tr><\/thead><tbody><tr ng-repeat=\"amenity in amenities track by $index\" ng-if=\"amenity.value != 0 && !amenity.real_id\"><td><h3 style=\"margin:0\"><input type=\"checkbox\" class=\"addOn\" ng-model=\"amenities[$index].active\" ng-checked=\"amenity.active == 1\" value=\"{[amenity.id]}\" \/> <span ng-bind=\"amenity.name\"><\/span><\/h3><p ng-if=\"!isEmptyObject(amenity.description)\" ng-bind=\"amenity.description\"><\/p><\/td><td class=\"text-center\" style=\"width: 80px;\"><input type=\"text\" class=\"form-control text-right\" id=\"qty-optional-fee-{[amenity.id]}\" ng-model=\"amenities[$index].quantity\" ng-if='amenity.allow_multiple' \/><span ng-if='!amenity.allow_multiple'>1<\/span><\/td><td class=\"text-right\" style=\"width:80px;\" ng-bind=\"currencyValue(amenity.value)\"><\/td><\/tr><\/tbody><\/table><\/div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-success\" data-dismiss=\"modal\">Close<\/button><button type=\"button\" class=\"btn btn-primary\" ng-click=\"addToReservation()\">Add to reservation<\/button><\/div><\/div><\/div><\/div>\n  \n  <form method=\"post\" id=\"form_thankyou\" action=\"https:\/\/costaricarentals.casa\/es\/thank-you\/\"><input type=\"hidden\" id=\"confirmation_id\" name=\"confirmation_id\" value=\"\" \/><input type=\"hidden\" id=\"location_name\" name=\"location_name\" value=\"\" \/><input type=\"hidden\" id=\"condo_type_name\" name=\"condo_type_name\" value=\"\" \/><input type=\"hidden\" id=\"unit_name\" name=\"unit_name\" value=\"\" \/><input type=\"hidden\" id=\"startdate\" name=\"startdate\" value=\"\" \/><input type=\"hidden\" id=\"enddate\" name=\"enddate\" value=\"\" \/><input type=\"hidden\" id=\"occupants\" name=\"occupants\" value=\"\" \/><input type=\"hidden\" id=\"occupants_small\" name=\"occupants_small\" value=\"\" \/><input type=\"hidden\" id=\"pets\" name=\"pets\" value=\"\" \/><input type=\"hidden\" id=\"price_common\" name=\"price_common\" value=\"\" \/><input type=\"hidden\" id=\"price_balance\" name=\"price_balance\" value=\"\" \/><input type=\"hidden\" id=\"travelagent_name\" name=\"travelagent_name\" value=\"\" \/><input type=\"hidden\" id=\"email\" name=\"email\" value=\"\" \/><input type=\"hidden\" id=\"fname\" name=\"fname\" value=\"\" \/><input type=\"hidden\" id=\"lname\" name=\"lname\" value=\"\" \/><input type=\"hidden\" id=\"unit_id\" name=\"unit_id\" value=\"\" \/><\/form>\n  \n  <script>\n    jQuery(document).ready(function($){\n        \/* 1. Mobile Detector *\/\n        function isMobile() { return $(window).width() < 992; }\n\n        \/* 2. Accordion Logic *\/\n        $('body').on('click', '.panel-heading', function(e) {\n            if(!isMobile()) return; \n            e.preventDefault(); e.stopPropagation();\n            var $header = $(this);\n            var targetID = $header.attr('data-target') || $header.attr('href');\n            var $content = $(targetID);\n            if($content.length === 0) { $content = $header.next('.panel-collapse'); }\n            var isOpen = $content.is(':visible');\n            if(isOpen) {\n                $content.slideUp(250); \n                $header.removeClass('mobile-active').addClass('collapsed');\n            } else {\n                $('.panel-collapse').not($content).slideUp(250);\n                $('.panel-heading').not($header).removeClass('mobile-active').addClass('collapsed');\n                $content.slideDown(250);\n                $header.addClass('mobile-active').removeClass('collapsed');\n                $('html, body').animate({ scrollTop: $header.offset().top - 70 }, 300);\n            }\n        });\n\n        \/* 3. Auto Advance (Universal - Desktop & Mobile) *\/\n        $('.panel-collapse').on('shown.bs.collapse', function () { $(this).css('height', 'auto'); });\n        \n        \/\/ Step 1 -> Step 2 (Guest Info to Protection)\n        $('body').on('blur change', '.check-auto-advance', function(){\n            var empty = false;\n            $('#step1 input[required]').each(function(){ if($(this).val()=='') empty=true; });\n            \/\/ Check if step 1 is valid (no empty required fields and no angular error classes)\n            if(!empty && $('#step1 .ng-invalid').length == 0) {\n                setTimeout(function(){ \n                    \/\/ If Step 2 exists (has content), open it. Otherwise go to Step 3.\n                    if($('#step2').length && $('#step2 .panel-body').children().length > 0) {\n                        $('#step2').collapse('show'); \n                    } else {\n                        $('#step3').collapse('show'); \n                    }\n                }, 500);\n            }\n        });\n\n        \/\/ Step 2 -> Step 3 (Protection to Payment)\n        $('body').on('click change', '#step2 input[type=\"checkbox\"]', function(){\n             setTimeout(function(){\n                 \/\/ Logic: If the protection error message is NOT visible, it means requirements are met.\n                 \/\/ The error message has class .ng-invalid and usually ng-show=\"protectionError\"\n                 var errorVisible = $('#step2 p.ng-invalid').is(':visible');\n                 \n                 if(!errorVisible) {\n                     $('#step3').collapse('show');\n                 }\n             }, 500); \/\/ Small delay to allow Angular to update the DOM state\n        });\n\n        \/* 4. View Details Logic (Classic) *\/\n        $('body').on('click', '.btn-price-breakdown', function(e) { \n            e.preventDefault();\n            var $container = $(this).closest('.panel-body, .resdays'); \n            var $details = $container.find('.breakdown-days-hidden');\n            if($details.length > 0) {\n                $details.slideToggle();\n            } else {\n                $('.breakdown-days-hidden').slideToggle();\n            }\n            \n            setTimeout(function(){ \n                var days_res = jQuery('.resdays table').find(\".days\").length; \n                var total_room_rate = jQuery('.resdays .total-room-rate').text().split('$'); \n                if(total_room_rate.length > 1) {\n                    total_room_rate = total_room_rate[1].replace(\",\", \"\"); \n                    var daily_price = (total_room_rate \/ days_res ).toFixed(2); \n                    jQuery('.day_price').text('$'+daily_price); \n                }\n            }, 100); \n        });\n\n        \/* 5. Force American Date Placeholder (MM \/ YY) *\/\n        function fixExpirationPlaceholder() {\n            var $inputs = $('input[placeholder=\"mm\/yyyy\"], input[aria-label=\"Card expiration date\"], input[name=\"expiration_date\"]');\n            $inputs.each(function(){\n                var $el = $(this);\n                if($el.attr('placeholder') !== 'MM \/ YY') {\n                    $el.attr('placeholder', 'MM \/ YY');\n                }\n            });\n        }\n        \n        \/\/ Executa imediatamente e periodicamente\n        fixExpirationPlaceholder();\n        setInterval(fixExpirationPlaceholder, 500);\n\n        \/* 6. Auto-Fix \"12-25\" to \"12\/25\" (Hyphen Corrector) *\/\n        $('body').on('keyup blur change', 'input[name=\"expiration_date\"]', function(){\n            var currentVal = $(this).val();\n            \/\/ Se encontrar um tra\u00e7o, substitui por barra imediatamente\n            if (currentVal.indexOf('-') > -1) {\n                $(this).val(currentVal.replace('-', '\/'));\n                $(this).trigger('input'); \/\/ Notifica o Angular para revalidar\n            }\n        });\n\n        \/* 7. CUSTOM FEE & TAX CALCULATION (Fix for Empty Values) *\/\n        \/\/ Este script acessa o escopo do Angular, observa mudan\u00e7as na reserva e soma manualmente as taxas e impostos\n        setTimeout(function(){\n            var appElement = document.querySelector('[ng-controller=\"CheckoutController as cCtrl\"]');\n            if(appElement && angular) {\n                var $scope = angular.element(appElement).scope();\n                \n                \/\/ Observa o objeto reservationDetails\n                $scope.$watch('reservationDetails', function(newVal) {\n                    if(newVal) {\n                        \/\/ Calcula Rent (Total de Required Fees)\n                        var rent = 0;\n                        if(newVal.required_fees && newVal.required_fees.length) {\n                            angular.forEach(newVal.required_fees, function(fee){ \n                                rent += parseFloat(fee.value); \n                            });\n                        }\n                        \/\/ Define vari\u00e1vel customizada no escopo\n                        $scope.customRentTotal = rent;\n\n                        \/\/ Calcula Taxes (Total de Impostos)\n                        var taxes = 0;\n                        if(newVal.taxes_details && newVal.taxes_details.length) {\n                             angular.forEach(newVal.taxes_details, function(tax){ \n                                taxes += parseFloat(tax.value); \n                            });\n                        }\n                        \/\/ Fallback: se o array taxes_details estiver vazio, tenta usar o total_tax direto\n                        if(taxes === 0 && newVal.total_tax > 0) {\n                            taxes = parseFloat(newVal.total_tax);\n                        }\n                        \/\/ Define vari\u00e1vel customizada no escopo\n                        $scope.customTaxTotal = taxes;\n                    }\n                }, true); \/\/ true = deep watch (observa propriedades internas do objeto)\n            }\n        }, 1000); \/\/ Pequeno delay para garantir que o Angular carregou\n    });\n  <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-157","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Checkout -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/costaricarentals.casa\/es\/checkout\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Checkout -\" \/>\n<meta property=\"og:url\" content=\"https:\/\/costaricarentals.casa\/es\/checkout\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Finalizar compra -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/costaricarentals.casa\/es\/checkout\/","og_locale":"es_ES","og_type":"article","og_title":"Checkout -","og_url":"https:\/\/costaricarentals.casa\/es\/checkout\/","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/costaricarentals.casa\/checkout\/","url":"https:\/\/costaricarentals.casa\/checkout\/","name":"Finalizar compra -","isPartOf":{"@id":"https:\/\/costaricarentals.casa\/#website"},"datePublished":"2026-04-12T01:26:14+00:00","breadcrumb":{"@id":"https:\/\/costaricarentals.casa\/checkout\/#breadcrumb"},"inLanguage":"es-CR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/costaricarentals.casa\/checkout\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/costaricarentals.casa\/checkout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/costaricarentals.casa\/"},{"@type":"ListItem","position":2,"name":"Checkout"}]},{"@type":"WebSite","@id":"https:\/\/costaricarentals.casa\/#website","url":"https:\/\/costaricarentals.casa\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/costaricarentals.casa\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-CR"}]}},"_links":{"self":[{"href":"https:\/\/costaricarentals.casa\/es\/wp-json\/wp\/v2\/pages\/157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/costaricarentals.casa\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/costaricarentals.casa\/es\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/costaricarentals.casa\/es\/wp-json\/wp\/v2\/comments?post=157"}],"version-history":[{"count":0,"href":"https:\/\/costaricarentals.casa\/es\/wp-json\/wp\/v2\/pages\/157\/revisions"}],"wp:attachment":[{"href":"https:\/\/costaricarentals.casa\/es\/wp-json\/wp\/v2\/media?parent=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}