/* ==========================================================
   CASA LAURENTINA
   SECONDARY PAYMENT PAGE
   File: booking-secondary.css
   ========================================================== */


/* ==========================================================
   1. ELEMENTOR / PAGE WIDTH
   ========================================================== */

.elementor-1639,
.elementor-1639 .elementor-element-3f7c069,
.elementor-1639 .elementor-element-eeb694d,
.elementor-1639 .elementor-widget-container,
.elementor-1639 .elementor-shortcode {
    width: 100% !important;
    max-width: none !important;
}

.elementor-1639 .elementor-element-3f7c069 {
    display: block !important;
    padding: 60px 24px 80px !important;
}


/* ==========================================================
   2. WP BOOKING SYSTEM MAIN WRAPPER
   ========================================================== */

.elementor-1639 .wpbs-main-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.elementor-1639 .wpbs-payment-confirmation,
.elementor-1639 .wpbs-final-payment-confirmation {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   3. PAYMENT CARD
   ========================================================== */

.elementor-1639 .wpbs-payment-confirmation-inner {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 40px 44px 44px !important;

    background: #ffffff !important;
    border: 1px solid rgba(40, 53, 80, 0.12) !important;
    border-radius: 16px !important;

    box-shadow:
        0 18px 50px rgba(40, 53, 80, 0.08) !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   4. GLOBAL TABLE RESET
   ========================================================== */

.elementor-1639 .wpbs-payment-confirmation-inner table.wpbs-pricing-table {
    display: table !important;
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 32px !important;
    padding: 0 !important;

    border: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;

    table-layout: fixed !important;

    background: transparent !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
}

.elementor-1639 .wpbs-payment-confirmation-inner table.wpbs-pricing-table thead {
    display: table-header-group !important;
}

.elementor-1639 .wpbs-payment-confirmation-inner table.wpbs-pricing-table tbody {
    display: table-row-group !important;
}

.elementor-1639 .wpbs-payment-confirmation-inner table.wpbs-pricing-table tr {
    display: table-row !important;
}

.elementor-1639 .wpbs-payment-confirmation-inner table.wpbs-pricing-table th,
.elementor-1639 .wpbs-payment-confirmation-inner table.wpbs-pricing-table td {
    display: table-cell !important;

    height: auto !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    font-family: "Open Sans", Arial, sans-serif !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}


/* ==========================================================
   5. BOOKING DETAILS TABLE
   First pricing table
   ========================================================== */

.elementor-1639
.wpbs-payment-confirmation-inner
> table.wpbs-pricing-table:first-of-type {
    margin-bottom: 34px !important;
}


/* ---------- Title ---------- */

.elementor-1639
.wpbs-payment-confirmation-inner
> table.wpbs-pricing-table:first-of-type
thead th {
    width: 100% !important;

    padding: 0 0 20px !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(40, 53, 80, 0.14) !important;

    color: #283550 !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;

    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}


/* ---------- Rows ---------- */

.elementor-1639
.wpbs-payment-confirmation-inner
> table.wpbs-pricing-table:first-of-type
tbody tr {
    border-bottom: 1px solid rgba(40, 53, 80, 0.08) !important;
}

.elementor-1639
.wpbs-payment-confirmation-inner
> table.wpbs-pricing-table:first-of-type
tbody tr:last-child {
    border-bottom: 0 !important;
}


/* ---------- Cells ---------- */

.elementor-1639
.wpbs-payment-confirmation-inner
> table.wpbs-pricing-table:first-of-type
tbody td {
    padding: 12px 0 !important;

    border: 0 !important;
    background: transparent !important;

    font-size: 15px !important;
    line-height: 1.55 !important;

    vertical-align: top !important;
}


/* Label */

.elementor-1639
.wpbs-payment-confirmation-inner
> table.wpbs-pricing-table:first-of-type
tbody td:first-child {
    width: 38% !important;

    padding-right: 36px !important;

    color: #717985 !important;

    font-weight: 500 !important;
    text-align: left !important;
}


/* Value */

.elementor-1639
.wpbs-payment-confirmation-inner
> table.wpbs-pricing-table:first-of-type
tbody td:last-child {
    width: 62% !important;

    color: #283550 !important;

    font-weight: 600 !important;
    text-align: right !important;
}


/* Consent value */

.elementor-1639
.wpbs-payment-confirmation-inner
> table.wpbs-pricing-table:first-of-type
tbody tr:last-child td:last-child {
    font-weight: 400 !important;
    line-height: 1.6 !important;
}


/* ==========================================================
   6. PRICE TABLE
   ========================================================== */

.elementor-1639
table.wpbs-pricing-table.wpbs-payment-method-mollie {
    margin: 0 0 24px !important;

    border: 1px solid rgba(40, 53, 80, 0.12) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    border-radius: 12px !important;

    overflow: hidden !important;

    background: #ffffff !important;
}


/* ---------- Header ---------- */

.elementor-1639
table.wpbs-pricing-table.wpbs-payment-method-mollie
thead th {
    padding: 14px 18px !important;

    background: #f5f4ef !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(40, 53, 80, 0.12) !important;

    color: #283550 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;

    text-align: left !important;
}

.elementor-1639
table.wpbs-pricing-table.wpbs-payment-method-mollie
thead th:first-child {
    width: 70% !important;
}

.elementor-1639
table.wpbs-pricing-table.wpbs-payment-method-mollie
thead th:last-child {
    width: 30% !important;
    text-align: right !important;
}


/* ---------- Price rows ---------- */

.elementor-1639
table.wpbs-pricing-table.wpbs-payment-method-mollie
tbody td {
    padding: 14px 18px !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(40, 53, 80, 0.08) !important;

    background: #ffffff !important;

    color: #283550 !important;

    font-size: 14px !important;
    line-height: 1.5 !important;

    vertical-align: middle !important;
}

.elementor-1639
table.wpbs-pricing-table.wpbs-payment-method-mollie
tbody td:first-child {
    width: 70% !important;
    text-align: left !important;
}

.elementor-1639
table.wpbs-pricing-table.wpbs-payment-method-mollie
tbody td:last-child {
    width: 30% !important;

    white-space: nowrap !important;

    text-align: right !important;
}

.elementor-1639
table.wpbs-pricing-table.wpbs-payment-method-mollie
tbody tr:last-child td {
    border-bottom: 0 !important;
}


/* ==========================================================
   7. PRICE TEXT
   ========================================================== */

.elementor-1639 .wpbs-abbr {
    color: inherit !important;
    text-decoration: none !important;
}

.elementor-1639 .wpbs-line-item-bold {
    font-weight: 600 !important;
}

.elementor-1639 .wpbs-price {
    white-space: nowrap !important;
}

.elementor-1639 .wpbs-price-currency {
    font-size: 0.82em !important;
    font-weight: inherit !important;
}


/* ==========================================================
   8. TOTAL
   ========================================================== */

.elementor-1639
table.wpbs-pricing-table.wpbs-payment-method-mollie
tr.wpbs-line-item-total td {
    padding-top: 17px !important;
    padding-bottom: 17px !important;

    background: #f5f4ef !important;

    border-top: 1px solid rgba(40, 53, 80, 0.14) !important;
    border-bottom: 0 !important;

    color: #283550 !important;

    font-size: 17px !important;
    font-weight: 700 !important;
}

.elementor-1639
table.wpbs-pricing-table.wpbs-payment-method-mollie
tr.wpbs-line-item-total td:last-child {
    font-size: 20px !important;
}


/* ==========================================================
   9. TEST MODE NOTICE
   ========================================================== */

.elementor-1639 .wpbs-payment-test-mode-enabled {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin: 0 0 22px !important;
    padding: 13px 16px 13px 46px !important;

    box-sizing: border-box !important;

    background: #fffaf0 !important;

    border: 1px solid #e5d6a8 !important;
    border-radius: 9px !important;

    color: #665525 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}

.elementor-1639 .wpbs-payment-test-mode-enabled::before {
    content: "!" !important;

    position: absolute !important;
    top: 50% !important;
    left: 16px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;
    height: 20px !important;

    transform: translateY(-50%) !important;

    border: 1px solid #b99a43 !important;
    border-radius: 50% !important;

    color: #8c722d !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}


/* ==========================================================
   10. MOLLIE PAYMENT AREA
   ========================================================== */

.elementor-1639 .wpbs-payment-confirmation-mollie-form,
.elementor-1639 #mollie-payment-button {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}


/* ==========================================================
   11. PAYMENT BUTTON
   ========================================================== */

.elementor-1639
#mollie-payment-button
.cdo-mollie-pay-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 16px 28px !important;

    box-sizing: border-box !important;

    background: #283550 !important;

    border: 0 !important;
    border-radius: 9px !important;

    color: #ffffff !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    text-align: center !important;
    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}

.elementor-1639
#mollie-payment-button
.cdo-mollie-pay-button:hover {
    background: #354563 !important;

    color: #ffffff !important;

    text-decoration: none !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 8px 22px rgba(40, 53, 80, 0.18) !important;
}

.elementor-1639
#mollie-payment-button
.cdo-mollie-pay-button:focus-visible {
    outline: 3px solid rgba(40, 53, 80, 0.22) !important;
    outline-offset: 3px !important;
}


/* ==========================================================
   12. POWERED BY MOLLIE
   ========================================================== */

.elementor-1639
#mollie-payment-button
.wpbs-powered-by-mollie {
    display: block !important;

    width: auto !important;
    max-width: 330px !important;
    height: auto !important;

    margin: 20px auto 0 !important;

    padding: 0 !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* ==========================================================
   13. TABLET
   ========================================================== */

@media (max-width: 1024px) {

    .elementor-1639 .elementor-element-3f7c069 {
        padding: 44px 24px 64px !important;
    }

    .elementor-1639 .wpbs-main-wrapper {
        max-width: 820px !important;
    }

    .elementor-1639 .wpbs-payment-confirmation-inner {
        padding: 34px 34px 38px !important;
    }
}


/* ==========================================================
   14. MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .elementor-1639 .elementor-element-3f7c069 {
        padding: 28px 16px 48px !important;
    }

    .elementor-1639 .wpbs-payment-confirmation-inner {
        padding: 25px 18px 28px !important;

        border-radius: 12px !important;

        box-shadow:
            0 10px 30px rgba(40, 53, 80, 0.07) !important;
    }


    /* ------------------------------------------------------
       Booking details
       Stack label and value vertically
       ------------------------------------------------------ */

    .elementor-1639
    .wpbs-payment-confirmation-inner
    > table.wpbs-pricing-table:first-of-type {
        display: block !important;
    }

    .elementor-1639
    .wpbs-payment-confirmation-inner
    > table.wpbs-pricing-table:first-of-type
    thead {
        display: block !important;
    }

    .elementor-1639
    .wpbs-payment-confirmation-inner
    > table.wpbs-pricing-table:first-of-type
    thead tr {
        display: block !important;
    }

    .elementor-1639
    .wpbs-payment-confirmation-inner
    > table.wpbs-pricing-table:first-of-type
    thead th {
        display: block !important;

        width: 100% !important;

        padding-bottom: 16px !important;

        font-size: 24px !important;
    }

    .elementor-1639
    .wpbs-payment-confirmation-inner
    > table.wpbs-pricing-table:first-of-type
    tbody {
        display: block !important;
    }

    .elementor-1639
    .wpbs-payment-confirmation-inner
    > table.wpbs-pricing-table:first-of-type
    tbody tr {
        display: block !important;

        width: 100% !important;

        padding: 11px 0 !important;
    }

    .elementor-1639
    .wpbs-payment-confirmation-inner
    > table.wpbs-pricing-table:first-of-type
    tbody td {
        display: block !important;

        width: 100% !important;

        padding: 0 !important;

        text-align: left !important;
    }

    .elementor-1639
    .wpbs-payment-confirmation-inner
    > table.wpbs-pricing-table:first-of-type
    tbody td:first-child {
        width: 100% !important;

        margin: 0 0 4px !important;
        padding: 0 !important;

        color: #717985 !important;

        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;

        text-transform: uppercase !important;
        letter-spacing: 0.035em !important;
    }

    .elementor-1639
    .wpbs-payment-confirmation-inner
    > table.wpbs-pricing-table:first-of-type
    tbody td:last-child {
        width: 100% !important;

        color: #283550 !important;

        font-size: 15px !important;
        line-height: 1.5 !important;

        text-align: left !important;
    }


    /* ------------------------------------------------------
       Price table
       Keep two columns
       ------------------------------------------------------ */

    .elementor-1639
    table.wpbs-pricing-table.wpbs-payment-method-mollie {
        table-layout: fixed !important;
    }

    .elementor-1639
    table.wpbs-pricing-table.wpbs-payment-method-mollie
    thead th {
        padding: 12px !important;

        font-size: 11px !important;
    }

    .elementor-1639
    table.wpbs-pricing-table.wpbs-payment-method-mollie
    tbody td {
        padding: 12px !important;

        font-size: 13px !important;
    }

    .elementor-1639
    table.wpbs-pricing-table.wpbs-payment-method-mollie
    thead th:first-child,
    .elementor-1639
    table.wpbs-pricing-table.wpbs-payment-method-mollie
    tbody td:first-child {
        width: 64% !important;
    }

    .elementor-1639
    table.wpbs-pricing-table.wpbs-payment-method-mollie
    thead th:last-child,
    .elementor-1639
    table.wpbs-pricing-table.wpbs-payment-method-mollie
    tbody td:last-child {
        width: 36% !important;
    }

    .elementor-1639
    table.wpbs-pricing-table.wpbs-payment-method-mollie
    tr.wpbs-line-item-total td {
        font-size: 15px !important;
    }

    .elementor-1639
    table.wpbs-pricing-table.wpbs-payment-method-mollie
    tr.wpbs-line-item-total td:last-child {
        font-size: 17px !important;
    }


    /* Notice */

    .elementor-1639 .wpbs-payment-test-mode-enabled {
        padding: 12px 13px 12px 43px !important;

        font-size: 13px !important;
    }


    /* Button */

    .elementor-1639
    #mollie-payment-button
    .cdo-mollie-pay-button {
        min-height: 54px !important;

        padding: 14px 18px !important;

        font-size: 15px !important;
    }


    /* Mollie image */

    .elementor-1639
    #mollie-payment-button
    .wpbs-powered-by-mollie {
        max-width: 280px !important;

        margin-top: 18px !important;
    }
}


/* ==========================================================
   15. SMALL MOBILE
   ========================================================== */

@media (max-width: 420px) {

    .elementor-1639 .elementor-element-3f7c069 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .elementor-1639 .wpbs-payment-confirmation-inner {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .elementor-1639
    table.wpbs-pricing-table.wpbs-payment-method-mollie
    thead th:first-child,
    .elementor-1639
    table.wpbs-pricing-table.wpbs-payment-method-mollie
    tbody td:first-child {
        width: 60% !important;
    }

    .elementor-1639
    table.wpbs-pricing-table.wpbs-payment-method-mollie
    thead th:last-child,
    .elementor-1639
    table.wpbs-pricing-table.wpbs-payment-method-mollie
    tbody td:last-child {
        width: 40% !important;
    }

    .elementor-1639
    #mollie-payment-button
    .wpbs-powered-by-mollie {
        max-width: 100% !important;
    }
}







/* ==========================================================
   16. SUCCESSFUL PAYMENT CONFIRMATION
   ========================================================== */

.elementor-1639 .elementor-shortcode > .wpbs-mollie-payment-confirmation {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 900px !important;

    margin: 0 auto !important;
    padding: 26px 28px 26px 68px !important;

    box-sizing: border-box !important;

    background: #f6f8f3 !important;

    border: 1px solid rgba(47, 61, 35, 0.16) !important;
    border-radius: 12px !important;

    color: #283550 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;

    text-align: left !important;

    box-shadow:
        0 12px 36px rgba(40, 53, 80, 0.06) !important;
}


/* Success icon */

.elementor-1639 .elementor-shortcode > .wpbs-mollie-payment-confirmation::before {
    content: "✓" !important;

    position: absolute !important;
    top: 50% !important;
    left: 26px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 28px !important;
    height: 28px !important;

    transform: translateY(-50%) !important;

    background: #2f3d23 !important;

    border-radius: 50% !important;

    color: #ffffff !important;

    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}


/* ==========================================================
   SUCCESS CONFIRMATION — TABLET
   ========================================================== */

@media (max-width: 1024px) {

    .elementor-1639 .elementor-shortcode > .wpbs-mollie-payment-confirmation {
        max-width: 820px !important;
    }
}


/* ==========================================================
   SUCCESS CONFIRMATION — MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .elementor-1639 .elementor-shortcode > .wpbs-mollie-payment-confirmation {
        padding: 20px 18px 20px 58px !important;

        border-radius: 10px !important;

        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .elementor-1639 .elementor-shortcode > .wpbs-mollie-payment-confirmation::before {
        left: 18px !important;

        width: 26px !important;
        height: 26px !important;

        font-size: 15px !important;
    }
}


/* ==========================================================
   SUCCESS CONFIRMATION — SMALL MOBILE
   ========================================================== */

@media (max-width: 420px) {

    .elementor-1639 .elementor-shortcode > .wpbs-mollie-payment-confirmation {
        padding: 18px 14px 18px 52px !important;
    }

    .elementor-1639 .elementor-shortcode > .wpbs-mollie-payment-confirmation::before {
        left: 14px !important;
    }
}

















/* ==========================================================
   17. ALREADY PAID MESSAGE
   WPBS outputs this message as plain text directly inside
   .elementor-shortcode, without its own HTML wrapper.
   ========================================================== */

/*
 * When WPBS returns only the "already paid" text,
 * Elementor's shortcode container is used as the message box.
 *
 * :has(.wpbs-main-wrapper) excludes the normal payment screen.
 * :has(.wpbs-mollie-payment-confirmation) excludes the
 * successful-payment confirmation screen.
 */
.elementor-1639 .elementor-shortcode:not(:has(.wpbs-main-wrapper)):not(:has(.wpbs-mollie-payment-confirmation)) {
    position: relative !important;

    display: block !important;

    width: calc(100% - 48px) !important;
    max-width: 900px !important;

    margin: 60px auto 80px !important;
    padding: 26px 28px 26px 68px !important;

    box-sizing: border-box !important;

    background: #f6f8f3 !important;

    border: 1px solid rgba(47, 61, 35, 0.16) !important;
    border-radius: 12px !important;

    color: #283550 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;

    text-align: left !important;

    box-shadow:
        0 12px 36px rgba(40, 53, 80, 0.06) !important;
}


/* Success / completed icon */

.elementor-1639 .elementor-shortcode:not(:has(.wpbs-main-wrapper)):not(:has(.wpbs-mollie-payment-confirmation))::before {
    content: "✓" !important;

    position: absolute !important;
    top: 50% !important;
    left: 26px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 28px !important;
    height: 28px !important;

    transform: translateY(-50%) !important;

    background: #2f3d23 !important;

    border-radius: 50% !important;

    color: #ffffff !important;

    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}


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

@media (max-width: 1024px) {

    .elementor-1639 .elementor-shortcode:not(:has(.wpbs-main-wrapper)):not(:has(.wpbs-mollie-payment-confirmation)) {
        width: calc(100% - 48px) !important;
        max-width: 820px !important;

        margin-top: 44px !important;
        margin-bottom: 64px !important;
    }
}


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

@media (max-width: 767px) {

    .elementor-1639 .elementor-shortcode:not(:has(.wpbs-main-wrapper)):not(:has(.wpbs-mollie-payment-confirmation)) {
        width: calc(100% - 32px) !important;

        margin: 28px auto 48px !important;
        padding: 20px 18px 20px 58px !important;

        border-radius: 10px !important;

        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .elementor-1639 .elementor-shortcode:not(:has(.wpbs-main-wrapper)):not(:has(.wpbs-mollie-payment-confirmation))::before {
        left: 18px !important;

        width: 26px !important;
        height: 26px !important;

        font-size: 15px !important;
    }
}


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

@media (max-width: 420px) {

    .elementor-1639 .elementor-shortcode:not(:has(.wpbs-main-wrapper)):not(:has(.wpbs-mollie-payment-confirmation)) {
        width: calc(100% - 24px) !important;

        padding: 18px 14px 18px 52px !important;
    }

    .elementor-1639 .elementor-shortcode:not(:has(.wpbs-main-wrapper)):not(:has(.wpbs-mollie-payment-confirmation))::before {
        left: 14px !important;
    }
}