/* ------------------------------------------------------------------------------------------------------------------ */
/* Light   -   24-09   -   C O L O R    S K I N           */
/* ------------------------------------------------------------------------------------------------------------------ */
/*  For best compatibility, please change parameters only in :root { ... } section  */
/* Round 1 */
:root {
    /* Round Properties */
    --wpbc_cal-day-cell-border-radius: 16%;
    --wpbc_cal-day-cell-border-width: 2px;
    --wpbc_cal-day-bg-color-opacity: 25%;
    --wpbc_cal-selected-day-bg-color-opacity: 90%;
    /* Default Font Sizes */
    --wpbc_cal-text-general-size: 14px;
    --wpbc_cal-text-cost-size: 50%;
    --wpbc_cal-text-header-size: 13px;
    --wpbc_cal-text-weekdays-size: 10px;
    --wpbc_cal-text-prev-next-links-size: 25px;
    /* Main Colors */
    --wpbc_cal-main-background-color: #ebe0cc;
    --wpbc_cal-header-text-color: #153448;
    --wpbc_cal-text-prev-next-links-color: #153448;
    --wpbc_cal-text-weekdays-color: #153448;
    /* Days Colors */
    --wpbc_cal-unavailable-day-color: var(--wpbc_cal-main-background-color);            /* Usually it has to be the same as --wpbc_cal-main-background-color */
    --wpbc_cal-unavailable-text-color: #cdbfa8;
    --wpbc_cal-available-day-color: #809254;
    --wpbc_cal-available-text-color: #809254;
    --wpbc_cal-approved-day-color: #c96445;
    --wpbc_cal-approved-text-color: #b45d43;
    --wpbc_cal-pending-day-color: #C99A4A;
    --wpbc_cal-pending-text-color: #C99A4A;
    --wpbc_cal-selected-day-color: #153448;
    --wpbc_cal-selected-text-color: #cdbfa8;
    --wpbc_cal-hover-day-color: #42562c;
    --wpbc_cal-hover-text-color: #42562c;
    --wpbc_cal-timespartly-day-color: #C99A4A;
    --wpbc_cal-timespartly-text-color: #C99A4A;

    /* Minor Parameters */
        --wpbc_cal-day-cells-padding: 2px;
        
    /* Day Sizing */
/*    --wpbc_cal_legend-day-cell-height: 65px;*/
 /*   --wpbc_cal_legend-day-cell-width: var(--wpbc_cal_legend-day-cell-height); */
/* --wpbc_cal_legend-day-cell-font-size: 14px; /*

    /* Extra colors*/
    --wpbc_col-beige: #c2b092
}
/* Color Scheme: - .violet 1 */
:root.violet {
  --wpbc_cal-unavailable-day-color: #FFF;
  --wpbc_cal-unavailable-text-color: #d4d4d4c7;
  --wpbc_cal-available-day-color: #FFF;
  --wpbc_cal-available-text-color: #000;
  --wpbc_cal-approved-day-color: #efa557;
  --wpbc_cal-approved-text-color: #fff;
  --wpbc_cal-pending-day-color: #635bff;
  --wpbc_cal-pending-text-color: #fff;
  --wpbc_cal-selected-day-color: #589fc1;
  --wpbc_cal-selected-text-color: #fff;
  --wpbc_cal-hover-day-color: #589fc16e;
  --wpbc_cal-hover-text-color: #fff;
  --wpbc_cal-timespartly-day-color: #7E6FB3;
  --wpbc_cal-timespartly-text-color: #fff;
}

/* CUSTOM ADDITIONS */


/********************************************************
                    * TEXT STYLES 
********************************************************/

.customer-type-title, .wpdev-list-item-label,
 .time-selection .time-item label, 
 .price-hint-privat label, 
 .price-hint-erhverv label, 
 .price-hint-kundekode label,
 .price-hint-privat .wpbc-cost-amount,
 .price-hint-erhverv .wpbc-cost-amount,
 .price-hint-kundekode .wpbc-cost-amount,
 .price-hint-privat .wpbc-currency-symbol,
 .price-hint-erhverv .wpbc-currency-symbol,
 .price-hint-kundekode .wpbc-currency-symbol,
 .price-hint-privat input.wpbc_field_hint,
 .price-hint-ehrverv input.wpbc_field_hint,
 .price-hint-kundekode input.wpbc_field_hint {
     color: var(--wpbc_cal-header-text-color);
 }

/********************************************************
                    * RESOURCE SELECTION
********************************************************/

/* Lad containeren fylde hele bredden */
.airbnb-container {
  width: 100% !important;  /* Fill parent container */
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1rem;
}

select.active_booking_form {
    width: fit-content !important;
    padding-right: 60px !important;
    align-items: center !important;
}

/********************************************************
                    * TIMELINE
********************************************************/





/********************************************************
                    * CALENDAR
********************************************************/

/* TEMP RULE SINCE SUMMARY NOT SHOWING*/
.wpbc_r_betingelser.wpbc__row {
    display: block !important;
}

/* Venstre kolonne (Kalender) */
.airbnb-left {
  width: 65%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Højre kolonne (Booking Info) */
.airbnb-right {
  width: 35%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* EN STOR BOKS i højrespalten */
.right-column-big-box {
  background-color: var(--wpbc_cal-main-background-color);
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


/* Fjern "card"-look på undersektioner, så vi kun får én stor boks */
.customer-type-selection-wrapper,
.time-selection,
.price-hints-by-customer-type,
.kundekode-wrapper {
  background: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}

/* Kalender: fjern max-width begrænsning */
.wpbc_cal_container.bk_calendar_frame.wpbc_no_custom_width.months_num_in_row_.cal_month_num_2 {
  max-width: none !important;
}

/* Farver for dage eksempler */
.block_hints.datepick {
    justify-content: center;
}

/********************************************************
                    * Booking Info (right side)
********************************************************/

/* Selectors */
select#start-time-dd-selector-cl9, select#end-time-dd-selector-cl9, select.active_booking_form {
    background-color: #ffffff !important;
}


.price-hint-privat > div:first-of-type {
  margin-bottom: 20px;
}


a.wpbc_button_light.wpbc_wizard_step_button.wpbc_wizard_step_2 {
    background-color: #153448;
    color: #f5efe6;
    border: none;
    margin-top: 20px;
}

a.wpbc_button_light.wpbc_wizard_step_button.wpbc_wizard_step_2:hover {
    background-color: #c2b092;
    color: #153448;
    border: none;
    margin-top: 20px;
}

a.wpbc_stripe_pay_button.wpbc_pay_invoice_now {
    background-color: #153448 !important;
    color: #f5efe6 !important;
    font-weight: 500 !important;
}

a.wpbc_stripe_pay_button.wpbc_pay_invoice_now:hover {
    background-color: #c2b092;
    color: #f5efe6;
}

/* Mobile: Stack columns */
@media (max-width: 782px) {
    .block_hints.datepick {
        justify-content: flex-start;
    }
 }

/* Højden på hver dag-celle i kalenderen */
.datepick-inline .datepick-title-row th,
.datepick-inline .datepick-days-cell {
  height: 54px !important;
}

/* Overskrift over kundetype */
.customer-type-title {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
}

/* Container til radio-knapperne */
.customer-type-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  justify-content: center;
}

/* Style "radio-knapper" som buttons
.customer-type-buttons label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  user-select: none;
  font-size: 0.95rem;
  white-space: nowrap;
} */

.customer-type-buttons label:hover {
  border-color: #007bff;
}
/* Skjul native radio input */
.customer-type-buttons input[type="radio"] {
  display: none;
}
/* Marker valgt radio */
.customer-type-buttons label input[type="radio"]:checked + span {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

/* Tidspunkt-sektion */
.time-selection .time-item {
  margin-bottom: 0.75rem;
}

/********************************************************
                    * Kundekode
********************************************************/


@media (max-width: 768px) {
    .kb-row-layout-wrap.kb-row-layout-id6648_b91a12-20.alignfull.wp-block-kadence-rowlayout {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .kb-row-layout-wrap.kb-row-layout-id6648_b91a12-20.alignfull.wp-block-kadence-rowlayout {
        display: block !important;
    }
}


/********************************************************
                    * Kundekode
********************************************************/

.kundekode-request {
    display: flex;
}

.kundekode-request .button {
color: #153448;
}

/* Kundekode input + knap side om side */
.kundekode-field-button {
  display: inline-flex;
  width: 100%;
}
.kundekode-field-button input[type="text"] {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-right: none;
  border-radius: var(--wpbc_form-field-border-radius) 0 0 var(--wpbc_form-field-border-radius) !important;
  font-size: 1rem;
}
.kundekode-field-button button {
 /* border: 1px solid #007bff;*/
  border-left: none;
  background-color: var(--wpbc_cal-main-background-color);
  color: #fff;
  /* padding: 0 1rem;*/
  border-radius: 0 var(--wpbc_form-field-border-radius) var(--wpbc_form-field-border-radius) 0 !important;  
  cursor: pointer;
  font-size: 0;
  position: relative;
}
.kundekode-field-button button::before {
  content: '→';
  font-size: 1.2rem;
  color: #fff;
  display: block;
}
.kundekode-field-button button:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

/* "Fortsæt" knap i højre-aligned container */
.continue-div {
  margin-top: auto;
  text-align: right;
}
/********************************************************
                    * Responsive
********************************************************/

/* Mobile: Stack columns */
@media (max-width: 782px) {
  .airbnb-container {
    flex-direction: column;
  }
  .airbnb-left, .airbnb-right {
    width: 100% !important; /* stack at full width */
  }
  .wpbc_after_booking_thank_you_section {
      padding: 0;
      margin: 0;
  }

  .wpbc_cols_2 {
      flex-direction: column !important;
  }

  .wpbc_cols_2 > div {
      width: 100%;
  }

  .wpbc_ty__header {
      font-size: 20px;
  }

  .left-content-form {
      margin-bottom: 40px;
      
  }
  
  .wpbc_after_booking_thank_you_section .wpbc_ty__container, .wpbc-payment-confirmation {
    padding: 28px !important
  }
}

@media (max-width: 480px) {
    .wpbc_ty__header {
      font-size: 18px;
    }
    
    .wpbc-cost-amount {
      font-size: 18px;
    }
}

.kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit.kt-mobile-layout-row.kt-row-valign-top.kb-theme-content-width {
    display: block;
}

/*************************************
 * Button & Form Styles
 *************************************/
 
 .buttom-section-container {
	color:var(--wpbc_cal-header-text-color) !important;
    background-color: var(--wpbc_cal-main-background-color);
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    margin-top: 32px;
    border-radius: 6px;
 }
 
 
.right-column-big-box {
    min-height: 395px;
}

li.block_text.beverage_ad_libitum_price, li.block_text.beverage_single_price {
    font-size: 17px;
}

.summary-row.total-price-line {
    padding-bottom: 13px;
}

.wpbc__field {}

#booking_form_div9 > div.wpbc_booking_form_simple.airbnb-style > div > div.buttom-section-container > div.choice-container > div:nth-child(1) > div {}
 
@media (min-width: 782px) {
    .buttom-section-container {
        width: 500px;
    }
}
@media (max-width: 782px) {
    .buttom-section-container, .right-column-big-box {
        width: 66%;
        align-self: center;
    }
}
@media (max-width: 480px) {
    .buttom-section-container, .right-column-big-box {
        width: 100%;
    }
 }


.price-hints-by-customer-type {
    margin-buttom: 20px;
}

span.custom-price-display.custom-privat-pricehint1 {
    color: var(--wpbc_cal-header-text-color);
}

div#privat-additional-pricehint1 {
    color: var(--wpbc_cal-header-text-color);
}

span#privat-pricehint2 {}

.summary-row.total-price-line {
    font-weight: 600;
    font-size: 22px;
}

i.block_text_beverages_italic {
    margin-bottom: 15px;
}

label.wpbc_l_beverages.label-picker {
    line-height: 2 !important;
}

.price-summary-block.price-hint-privat {
    margin-top: 20px;
}

.wpbc__field {}

.wpbc_container_booking_form .wpbc__field:not(.wpbc__cal) {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
}

.wpbc_container_booking_form .wpbc__row {
    justify-content: flex-start !important;
}


/* Hide Company Name FIELD DIV for Privat in Step 2 */
 .wpbc_wizard_step2.customer-is-privat .wpbc_r_billingCompany.wpbc__field {
    display: none !important;
}

/* Hide the entire CVR ROW for Privat in Step 2 */
.wpbc_wizard_step2.customer-is-privat .business-rows.wpbc__row {
    display: none !important;
}


.wpbc_container.wpbc_form input.wpbc_button_light,
.wpbc_container.wpbc_form input.wpbc_button_light:focus,
.wpbc_container.wpbc_form input.wpbc_button_light:hover,
.wpbc_container .wpbc_button_light,
.wpbc_container .wpbc_button_light:focus,
.wpbc_container .wpbc_button_light:hover,
.wpbc_container.wpbc_container_booking_form .wpbc_button_light,
.wpbc_container.wpbc_container_booking_form .wpbc_button_light:focus,
.wpbc_container.wpbc_container_booking_form .wpbc_button_light:hover {
  font-size: clamp(1em, 1em + ((1vw - 0.2em) * 0.208), 1.125em);
  /* Removed: border: 2px solid #eeeeeeb5; */
  /* border: 2px solid #eeeeeeb5; */
  box-shadow: 0 2px 10px 2px #ffffff54;
  /* Removed: background: #fdfdfd; */
  /* Removed: color: #444444e0; */
  /* Preferred settings: */
  background: #153448;
  color: #f5efe6;
  border: none;
  border-radius: 6px;
  padding: 0 2.2em;
  line-height: calc(var(--wpbc_form-button-light-size-height) - 3px);
  text-shadow: none;
}

/* Focus/Hover overrides for buttons */
.wpbc_container.wpbc_form input.wpbc_button_light:focus,
.wpbc_container.wpbc_form input.wpbc_button_light:hover,
.wpbc_container .wpbc_button_light:focus,
.wpbc_container.wpbc_container_booking_form .wpbc_button_light:focus,
.wpbc_container .wpbc_button_light:hover,
.wpbc_container.wpbc_container_booking_form .wpbc_button_light:hover {
  border: none;
  background-color: #c2b092;
}

/* Duplicate rule for background & color (kept for clarity) */
.wpbc_container.wpbc_form input.wpbc_button_light,
.wpbc_container.wpbc_form input.wpbc_button_light:focus,
.wpbc_container.wpbc_form input.wpbc_button_light:hover,
.wpbc_container .wpbc_button_light,
.wpbc_container .wpbc_button_light:focus,
.wpbc_container .wpbc_button_light:hover,
.wpbc_container.wpbc_container_booking_form .wpbc_button_light,
.wpbc_container.wpbc_container_booking_form .wpbc_button_light:focus,
.wpbc_container.wpbc_container_booking_form .wpbc_button_light:hover {
  background: #153448;
  color: #f5efe6;
  border: none;
}

/* Section header in button area (property disabled) */
h4.wpbc_ty__section_text_costs_header {
  /* margin-bottom: 42px; */
}

/* Gateway container margin adjustments */
#form_id1198906134688 > div.wpbc_after_booking_thank_you_section > div.wpbc_ty__content_text.wpbc_ty__content_gateways > div:nth-child(1) {
  margin-bottom: 44px;
}

#form_id1198906134688 > div.wpbc_after_booking_thank_you_section > div.wpbc_ty__content_text.wpbc_ty__content_gateways > div.wpbc_ty__gateway.wpbc_col_auto_width > div > p:nth-child(1) {
  margin-bottom: 0;
}


/********************************************************
                    * Booking Confirmation
********************************************************/

.wpbc__field.final_buttons {
    flex-direction: row !important;
}

/* --- Booking Confirmation Details CSS --- */
.booking-confirmation-details-container {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background-color: #f9f9f9;
  max-width: 900px; /* Adjust as needed */
}

.booking-confirmation-details h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #005a87; /* Adjust color to match your theme */
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
}

.confirmation-grid {
  display: flex;
  flex-wrap: wrap; /* Allows columns to stack on small screens */
  gap: 30px; /* Space between columns */
}

.confirmation-column {
  flex: 1;
  min-width: 280px; /* Minimum width before stacking */
}

.conf-item {
  margin-bottom: 8px;
  display: flex; /* For aligning label and value if needed, or just simple block */
  flex-wrap: wrap;
}

.conf-label {
  font-weight: bold;
  color: #555;
  margin-right: 8px;
  flex-basis: 150px; /* Adjust as needed for label width */
  flex-shrink: 0;
}

.conf-value {
  color: #222;
  flex-grow: 1;
}

.conf-hr {
  border: 0;
  border-top: 1px dashed #ddd;
  margin: 15px 0;
}

.price-summary-confirmation {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ccc;
}

.price-summary-confirmation .conf-item {
  margin-bottom: 6px;
}

.price-summary-confirmation .conf-label {
  color: #444;
}
.price-summary-confirmation .conf-value {
  font-weight: bold;
}

.total-payable-line .conf-label,
.total-payable-line .conf-value {
  font-size: 1.1em;
  color: #0073aa; /* Highlight total */
}

/* Responsive: Stack columns on smaller screens */
@media (max-width: 767px) {
  .confirmation-grid {
    flex-direction: column;
  }
  .conf-label {
    flex-basis: 120px; /* Adjust for smaller screens if needed */
  }
}

span.custom-price-display.custom-erhverv-pricehint1 {
    color: var(--wpbc_cal-header-text-color);
}

span.custom-price-display.custom-kundekode-pricehint1 {
    color: var(--wpbc_cal-header-text-color);
}

.deposit-desc {
    color: var(--wpbc_cal-header-text-color);
    margin-top: 10px;
}

label.wpbc_l_food_choice_title.label-picker {
    font-weight: 600;
}

label.food-title {}

label {color: var ((((-(-wpbc_col))-beige))));}

label {
    color: var(--wpbc_col-beige);
    color: #c2b092;
}

label {
    color: var(--wpbc_cal-header-text-color);
}

span.summary-label {
    color: var(--wpbc_cal-header-text-color);
}

div#privat-catering-pricehint3 {
    color: var(--wpbc_cal-header-text-color);
}

.summary-row-breakdown.deposit-line {
    color: var(--wpbc_cal-header-text-color);
}

.price-hints-by-customer-type {
    color: var(--wpbc_cal-header-text-color);
}

.wpbc_r_betingelser.wpbc__row {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

.wpbc_c_betingelser.wpbc__field {
    max-height: fit-content;
}

.terms-checkbox {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
}

.terms-checkbox-span {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-width: fit-content !important;
}
.span.wpbc_wrap_checkbox.wpdev-form-control-wrap {
    min-width: fit-content !important;
}

.wpdev-form-control-wrap .wpdev-list-item {
    display: inline-flex !important;
}

span.wpbc_wrap_checkbox.wpdev-form-control-wrap.terms9 {
    min-width: fit-content;
}

/* REMOVED - NEEDS TO BE UPDATED */

/*
a {
    min-width: fit-content !important;
    text-align: center !important;
}
*/

.terms-link {
    margin: auto !important;
}

/* NEW END */


/*BOOKING CONF*/

.hr-over-pris {
    border: none;
}

p#payment-action-text-dk {
    font-weight: 500;
}

.wpbc_c_accesibility_notice.wpbc__field {
    flex: none !important;
    color: #153448;
}

/* REMOVED - NEEDS TO BE UPDATED */

/*
h4 {
    font-weight: 600;
    font-size: 22px !important;
}
*/


p#thank-you-text-dk, p#thank-you-text-dk {
    margin-bottom: 18px !important;
}

/* Hide message */
.wpbc_ty__message, 
.wpbc_ty__section_header, 
h4.wpbc_ty__section_text_costs_header  {
  display: none;
}

.wpbc_ty__content_gateways .wpbc_ty__gateway {
    margin: 0;
    display: flex;
    justify-content: center;
}

.wpbc_container_booking_form p{
    padding: 0;
}

.wpbc_container_booking_form {
    margin-top: 0 !important;
}

.wpbc_after_booking_thank_you_section .wpbc_ty__container, .wpbc-payment-confirmation {
    max-width: 700px;
    border-radius: 12px 12px 12px 12px;
    padding-right: 24px;
    padding-left: 24px;
    border-bottom: none;
}

/* Center payment description content */
.wpbc_ty__content_text.wpbc_ty__payment_description {
  justify-content: center;
}

/* Hide <br> element inside payment description */
#form_id906149102040 > div.wpbc_after_booking_thank_you_section > div.wpbc_ty__container > div.wpbc_ty__content > div.wpbc_ty__content_text.wpbc_ty__payment_description > br {
  display: none;
}

/* Basic styles for after booking thank you section */
.wpbc_after_booking_thank_you_section {
  border-radius: 12px;
  padding: 19px;  /* Using 19px as per booking confirmation style */
  align-content: center !important;
}

[id^="form_id"] > div.wpbc_after_booking_thank_you_section > div.wpbc_ty__container > div.wpbc_ty__content > div > div > div.confirmation-box > div.box-section.payment-action-section > p {
        margin-bottom: 20px !important;
}

[id^="form_id"] > div.wpbc_after_booking_thank_you_section > div.wpbc_ty__container > div.wpbc_ty__content > div > p:nth-child(1) {
    margin: 0;
}

.wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content {
    margin-top: 0;
}

/* Container header margin */
.wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__header {
  margin-bottom: 16px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}

.wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text {
    border: none !important;
    padding: 0 !important;
}

.wpbc_ty__content_text.wpbc_cols_2 {
    border: none !important;
    
}

/* Header strong styling (currently disabled) */
.wpbc_ty__header strong {
  /* color: red !important; */
}

/* Two-column layout: second item */
.wpbc_ty__content_text.wpbc_cols_2:nth-of-type(2) {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  align-items: flex-start;
  color: #153448;
}

/* Two-column layout: third item */
.wpbc_ty__content_text.wpbc_cols_2:nth-of-type(3) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
  background-color: #153448;
  color: #f5efe6;
  justify-content: space-between;
  width: 100%;
  padding: 24px;
  border-radius: 12px 12px 0 0;
}



@media (max-width: 782px) {
    .wpbc_after_booking_thank_you_section {
        border-radius: 12px;
        padding: 0;  /* Using 19px as per booking confirmation style */
    }


 }


/* --- General Styles --- */
.booking-confirmation-container {
  max-width: 700px; /* Adjust max-width as needed */
}

/* --- Booking Header --- */
.booking-header {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #dcd8cd; /* Lighter line than inside the box */
  font-size: 1.1em;
  color: #153448; /* Dark blue color */
  display: flex;
  align-items: center;
}

.header-bar {
  display: inline-block;
  width: 5px;
  height: 20px; /* Adjust height to match text size */
  background-color: #34495e; /* Dark blue color */
  margin-right: 10px;
}

.booking-id {
  font-weight: 600;
  color: #153448; /* Slightly darker blue for emphasis */
}

/* --- Confirmation Box --- */
.confirmation-box {
  background-color: #f5efe6; 
  border-radius: 12px; /* Rounded corners */
  padding: 30px; /* Padding inside the box */
  border: 1px solid #e0e0e0; /* Optional subtle border */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Optional subtle shadow */
}

/* --- Box Sections --- */
.box-section {
  margin-bottom: 25px;
}

.box-section:last-child {
  margin-bottom: 0; /* No margin at the very bottom */
}

.box-separator {
  border: none;
  border-top: 1px solid #e0e0e0; /* Separator line */
  margin: 25px 0;
}

/* --- Headings and Text --- */
.confirmation-box h4,
.confirmation-box h5 {
  margin: 0 0 15px 0;
  font-weight: 600;
  color: #153448; /* Dark blue headings */
}

.confirmation-box h4 {
  font-size: 1.3em; /* Slightly larger main title */
}

.confirmation-box h5 {
  font-size: 1.15em; /* Section titles */
}

.confirmation-box p {
  margin: 0 0 10px 0;
  font-size: 0.95em;
  color: #153448; /* Standard paragraph text color */
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
  line-height: 1.6em !important;
}

.confirmation-box p:last-child {
  margin-bottom: 0;
}

.confirmation-box p.note {
  font-size: 0.9em;
  color: #7f8c8d; /* Lighter color for the note */
}

.confirmation-box p.note strong {
  color: #153448; /* Darker blue for "Please note:" */
  font-weight: 500;
}

.confirmation-box strong { /* General strong tag styling inside box */
    font-weight: 500;
    color: #153448;
}


/* --- Booking Details --- */
.booking-details-section p {
    margin-bottom: 8px !important; /* Adjust spacing */
}

.google-calendar-link {
    font-size: 0.9em;
    color: #153448; /* Standard link blue */
    text-decoration: none;
}

.google-calendar-link:hover {
    text-decoration: underline;
}

/* --- Payment Details --- */
.payment-details-section {
    margin-bottom: 30px; /* More space before action */
}
.payment-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Allow wrapping on small screens */
  gap: 10px; /* Space between label and amount if they wrap */
}

.payment-label {
  font-size: 1.1em;
  color: #34495e; /* Dark blue label */
  font-weight: 600;
}

.payment-amount {
  font-size: 1.4em; /* Larger amount */
  font-weight: 700;
  color: #153448; /* Green color for amount */
}

/* --- Payment Action --- */
.payment-action-section {
  text-align: center;
}

.payment-action-section p {
  margin-bottom: 20px; /* Space above button */
  font-size: 0.95em;
  color: #153448;
}

.pay-button {
  display: inline-block;
  background-color: #153448; /* Green button background */
  color: #f5efe6 !important; /* White button text, !important to override potential theme link colors */
  padding: 12px 30px;
  text-decoration: none;
  border-radius: 6px;
  font-size: 1.1em;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pay-button:hover {
  background-color: #c2b092; /* Darker green on hover */
  text-decoration: none;
}

/* --- Optional Footer Line --- */
.footer-line {
  border: none;
}



/* END OF CUSTOM ADDITION */



/* ------------------------------------------------------------------------------------------------------------------ */
/* !!! Round Properties !!!  */
/* ------------------------------------------------------------------------------------------------------------------ */
/* Change Over days fix for Rounded Day Cells */
.wpbc-cell-box .wpbc-diagonal-el svg {
  width: calc( 100% + 0px );
  height: calc( 100% + 0px );
  border-radius: var( --wpbc_cal-day-cell-border-radius );
}
.datepick-inline td.datepick-days-cell.check_in_time .wpbc-cell-box .wpbc-diagonal-el,
.datepick-inline td.datepick-days-cell.check_out_time .wpbc-cell-box .wpbc-diagonal-el {
  margin-left: 0;
  margin-top: 0;
}
div.wpbc-cell-box .wpbc-diagonal-el svg polygon {
  fill: transparent;
}

/* Round Perfect Square Dates. Support in Browsers since 2021 y. */
.datepick-inline td.datepick-days-cell {
   aspect-ratio: 1 / 1;
}
.datepick-inline td.datepick-days-cell .wpbc-cell-box {
    padding: 0;
    margin: 0;
    position: relative;
    border-radius: var( --wpbc_cal-day-cell-border-radius );
    display: flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: center;
    /*! Important settings for showing 'Perfect Square Dates' */
    width: calc( 100% - var( --wpbc_cal-day-cell-border-width ) - var( --wpbc_cal-day-cell-border-width ) );
    height:auto;
    aspect-ratio: 1 / 1;
}
/*! == Safari Only ==   Required Hack for showing 'Perfect Square Dates' on Safari and on iOS */
@supports (-webkit-backdrop-filter: blur(1px)) {
    .datepick-inline td.datepick-days-cell .wpbc-cell-box {
        height:100%;
    }
}
/* Center Day Number */
.datepick-inline .datepick-days-cell .date-cell-content span, .datepick-inline .datepick-days-cell .date-cell-content a {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

/* ================================================================================================================== */
/* Other CSS                                                                                                          */
/* ================================================================================================================== */
/* Font Sizes */
.booking_form_div div.bk_calendar_frame div {
  font-size: var(--wpbc_cal-text-general-size);
}

/* Calendar Legend */
div.block_hints.datepick {
  /*background: none;*/
  /*border-radius: 3px;*/
  /*box-shadow: 0 1px 2px #1111110d;*/
  /*padding: 10px;*/
  /*margin: 20px 0 0;*/
  /*border: 1px solid #cccccc87;*/
  /*max-width: 320px;*/
}
div.block_hints.datepick * {
  font-size: var(--wpbc_cal-text-general-size);
}
.block_check_in_out, .block_pending, .block_time, .block_booked, .block_free {
    float: left;
    width: 40px;
    height: 40px;
    line-height: 32px;
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
}
.block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height,
.block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height table{
  min-width:  var(--wpbc_cal_legend-day-cell-width, 40px);  /* //FixIn: 10.9.2.3 */
  width: var(--wpbc_cal_legend-day-cell-width, 40px) !important;
  height:   var(--wpbc_cal_legend-day-cell-height, 40px) !important;
    width: calc(var(--wpbc_cal_legend-day-cell-width, 40px) + var(--wpbc_cal-day-cells-padding, 0px) + var(--wpbc_cal-day-cells-padding, 0px)) !important;
    height: calc(var(--wpbc_cal_legend-day-cell-width, 40px) + var(--wpbc_cal-day-cells-padding, 0px) + var(--wpbc_cal-day-cells-padding, 0px)) !important;
}
.block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height .wpbc_calendar_legend_day_cell_height {
    height: var(--wpbc_cal_legend-day-cell-height, 40px) !important;
    border-width: 0;
}
.block_hints.datepick .datepick-inline {
    margin-top: -3px;
}
.block_hints .datepick-inline,
.block_hints .datepick-inline .datepick {
    background: transparent;
}
/*
.block_hints .datepick-inline .date_available .wpbc-cell-box {
    background: var( --wpbc_cal-main-background-color );
    background: rgb(from var(--wpbc_cal-available-day-color) r g b / 100%);
}
.block_hints .datepick-inline .date_approved .wpbc-cell-box {
    background: rgb(from var(--wpbc_cal-approved-day-color) r g b / 100%);
}
.block_hints .datepick-inline .date2approve .wpbc-cell-box {
    background: rgb(from var(--wpbc_cal-pending-day-color) r g b / 100%);
}
 */
.block_hints .block_free {
    border: var( --wpbc_cal-day-cell-border-width ) solid var(--wpbc_cal-available-day-color);
}
/* ------------------------------------------------------------------------------------------------------------------ */
/* ==  From  Calendar.css  ==  */
/* ------------------------------------------------------------------------------------------------------------------ */
div.datepick-inline table.datepick,
div.datepick-inline table.datepick th,
div.datepick-inline table.datepick td {
     border-width: 0;
}
.datepick-inline .datepick,
.datepick-inline .calendar-links,
.datepick-inline .calendar-links a,
.datepick-inline .datepick-days-cell,
.datepick-inline .datepick-days-cell a,
.datepick-inline .datepick-days-cell div,
.datepick-inline .datepick-title-row,
.datepick-inline .datepick-title-row th {
  font-size: var(--wpbc_cal-text-general-size);
}
/* Mo Tu We Th Fr Sa Su */
/*#wpbc-new-admin-page .booking_form_div .datepick-inline .datepick .datepick-title-row th,*/
/*#wpbc-new-admin-page .booking_form_div .datepick-inline .datepick .datepick-title-row th *,*/
.datepick-inline .datepick .datepick-title-row th {
  font-size: var(--wpbc_cal-text-weekdays-size);
}
/* Month Name */
/*#wpbc-new-admin-page .datepick-inline .datepick-header, */
/*#wpbc-new-admin-page .datepick-inline .datepick-header span,*/
.datepick-inline .datepick-header,
.datepick-inline .datepick-header span{
  font-size: var(--wpbc_cal-text-header-size);
}
/* Next/Prev Month Links */
.datepick-inline .calendar-links {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 40px;
  margin-bottom: -40px;
}
.datepick-inline .calendar-links .datepick-prev,
.datepick-inline .calendar-links .datepick-next {
  flex: 0 1 30px;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: flex-end;
  margin: 0;
  line-height: 2em;
}
.datepick-inline .calendar-links .datepick-prev a,
.datepick-inline .calendar-links .datepick-next a,
.datepick-inline .calendar-links .datepick-prev a:hover,
.datepick-inline .calendar-links .datepick-next a:hover{

}
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */

/* Full Calendar Frame */
.datepick-inline {
  background: var( --wpbc_cal-main-background-color );
  border: 0px solid #555;
  box-shadow: 0 1px 5px 1px #00000014;
  border-radius: 6px;
  padding: 0;
}
/* Resolve Conflicts with tables in Elementor //FixIn: 10.9.2.2
table.wpbc_calendar tr:nth-child(2n) > td,
table.wpbc_calendar tr:nth-child(2n+1) > td {
  background-color: transparent;
}
*/
/* Background of one calendar month */
.datepick-inline .datepick-one-month {
    padding: 3px;
}
/* //FixIn: 10.9.2.2 */
.datepick-inline .datepick,
.datepick-inline:not(.wpbc_calendar_legend_table_width_height) .datepick thead,
.datepick-inline:not(.wpbc_calendar_legend_table_width_height) .datepick tbody{
  background: var( --wpbc_cal-main-background-color );
}
.wpbc_ajx_avy__calendar .datepick-inline:not(.wpbc_calendar_legend_table_width_height) .datepick tbody{
    background: transparent;
}
/* Previous & Next links  and TITLE BACKGROUND */
.datepick-inline .calendar-links {
    border-bottom:none;
}
/* Prev - Next Text */
.datepick-inline .calendar-links .datepick-prev a,
.datepick-inline .calendar-links .datepick-next a,
.datepick-inline .calendar-links .datepick-prev a:hover,
.datepick-inline .calendar-links .datepick-next a:hover{
  color: var(--wpbc_cal-text-prev-next-links-color);                      /* FixIn: 9.3.1.4 */
  text-shadow: none;
  font-weight: 400;
  padding: 0 12px 0px;
  font-size: var(--wpbc_cal-text-prev-next-links-size);
}
/* Month Titles */
.datepick-inline .datepick-header {
  color: var(--wpbc_cal-header-text-color);                      /* FixIn: 9.3.1.4 */
  font-weight: 600;
  text-shadow: none;
  margin: -3px 0 4px;
  background: transparent;
}
  /* One month only, hide white padding */
  .datepick-inline:not(.datepick-multi) .datepick-one-month {
    padding: 0;
  }
  .datepick-inline:not(.datepick-multi) .datepick-header {
      margin: 0;
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      padding: 0px 0 0 17px;
      box-sizing: border-box;
  }
/* Week Titles */
div.datepick-inline .datepick-title-row th{
    border: 1px solid #ccc;
    color: var(--wpbc_cal-text-weekdays-color);
    font-weight: 600;
    text-transform: uppercase;
}
/* Cell border*/
.block_hints .block_free,
.block_hints .block_time,
.block_hints .block_booked,
.block_hints .block_pending,
.block_hints .block_check_in_out,
.datepick-inline .datepick-days-cell{
    border: 0 solid #e1e1e1;
    color:#4b4b4b;
    border-radius: var( --wpbc_cal-day-cell-border-radius );
    /*border-radius: 100px; !* If calendar width set as 100%, then  here we can  not use  border-radius: 50%; :( *!*/

  border-radius: 6px;
    border-radius: var( --wpbc_cal-day-cell-border-radius );
  border-color: transparent;
  border-width: var( --wpbc_cal-day-cell-border-width ) !important;
  box-sizing: border-box;
}
/* Basically  this is padding between the dates: */
.datepick-inline th,
.datepick-inline .datepick-days-cell,
div.datepick-inline table.datepick.wpbc_calendar th,
div.datepick-inline table.datepick.wpbc_calendar td.datepick-days-cell{
  border-width: var( --wpbc_cal-day-cells-padding ) !important;
  box-sizing: border-box;
}
.datepick-inline th{
  border-color: var( --wpbc_cal-main-background-color ) !important;
}
/* Top and bottom "cost text" in day cells */
.datepick-inline .datepick-days-cell div.date-content-bottom,
.datepick-inline .datepick-days-cell div.date-content-top {
    font-weight: 400;
    color: var(--wpbc_cal-available-text-color);
    color: rgb( from var(--wpbc_cal-available-text-color) r g b / 50% );
    font-size: var(--wpbc_cal-text-cost-size);
}
/* Selected dates - Top and bottom "cost text" in day cells */
.datepick-inline .datepick-days-cell.datepick-current-day div.date-content-bottom,
.datepick-inline .datepick-days-cell.datepick-current-day div.date-content-top {
    /*color:#1d2d41;*/
}
/******************************************************************************** FixIn: 9.5.0.2 */
/*  New Stripes - Unavailable Cells - for  Booking > Availability page  ********/
/*******************************************************************************/
/* Stripes */
.wpbc_ajx_availability_container .datepick-inline .datepick .resource_unavailable:not(.datepick-unselectable,.datepick-current-day,.datepick-days-cell-over) .wpbc-cell-box {
  /*background: repeating-linear-gradient( 135deg, #fff, #fff 4px, #eaeaeb 4px, #eaeaeb 8px );*/
  /*background: repeating-linear-gradient( 135deg, #fff, #fff 4px, #f5f5ef 4px, #f5f5cf 8px );*/
  background: repeating-linear-gradient(-45deg, #eee 0 3px, var( --wpbc_cal-main-background-color ) 3px 8px);
}
/* Unselectable dates  &  headers - calendar empty cells */
.wpbc_ajx_availability_container .datepick-inline  th,
.wpbc_ajx_availability_container .datepick-inline .datepick-days-cell.datepick-unselectable{
    background: var(--wpbc_cal-main-background-color);                                                          /* Here the same color as at line #18 for  "Full Calendar Frame":   .datepick-inline { ... }  */
}
/* It is all unavailable dates */
.wpbc_ajx_availability_container .datepick-inline .date_user_unavailable,
.wpbc_ajx_availability_container .datepick-inline .before_after_unavailable,    /* "Before/After" unavailable days from  Settings General page in "Availability" section */
.wpbc_ajx_availability_container .datepick-inline .weekdays_unavailable,      /* "Weekdays" unavailable  from  Settings General page in "Availability" section */
.wpbc_ajx_availability_container .datepick-inline .season_unavailable       /* "SEASON" unavailable dates  defined at  Booking > Resources > Availability page */
{
   background: var(--wpbc_cal-main-background-color);
}
/* It is all unavailable RESOURCE dates defined at Booking > Availability page */
.wpbc_ajx_availability_container .resource_unavailable:not(.datepick-unselectable) {
    background: transparent;
    color:#fff;
}
/* Unavailable SELECTABLE days for Booking > Availability page */
.block_hints .datepick-inline .datepick-days-cell.date_user_unavailable a,
.datepick-inline .datepick-days-cell.date_user_unavailable:not(.datepick-unselectable) a{
  color:#ccc;
}
/* Unselectable dates - hide check in/out */
.wpbc_ajx_availability_container .datepick-inline td.datepick-days-cell.check_in_time.datepick-unselectable .wpbc-cell-box .wpbc-diagonal-el,
.wpbc_ajx_availability_container .datepick-inline td.datepick-days-cell.check_out_time.datepick-unselectable .wpbc-cell-box .wpbc-diagonal-el{
  display: none;
}cs             
/*********************************************************************************/
/* U N S E L E C T A B L E    -   Usually when we select 1st date with range dates selection mode, previous dates become unselectable. */
div.wpbc_ajx_availability_container .datepick-inline .datepick-unselectable,
.datepick-inline .datepick-unselectable{
  color: var(--wpbc_cal-unavailable-text-color);
  text-shadow: none;
  font-weight: 600;
}
.datepick-inline .datepick-unselectable span{                                                        /*  //FixIn: 8.9.4.13 */
    text-shadow: none;
}
/******************************************************************************** FixIn End: 9.5.0.2 */

/*******************************************************************************/
/*  Dates Cells       **********************************************************/
/*******************************************************************************/

/* A V A I L A B L E - BACKGROUND */
.block_hints .block_free,
.block_hints .block_time,
.block_hints .block_check_in_out div.check-in-div,                             /* Item  for the LEGEND */
.block_hints .block_check_in_out div.check-out-div,                             /* Item  for the LEGEND */
.datepick-inline .date_available .wpbc-cell-box,
.datepick-inline .timespartly.check_in_time div.check-in-div,                   /* Define the COLOR fot the check  in / out times the same as available*/
.datepick-inline .timespartly.check_out_time div.check-out-div {
    background: transparent;
    background: rgb( from var(--wpbc_cal-available-day-color) r g b / var( --wpbc_cal-day-bg-color-opacity ) );
    border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-available-day-color);
}
.block_hints .block_free {
    /*background: var(--wpbc_cal-main-background-color);*/
}
.datepick-inline .datepick-unselectable .wpbc-cell-box,
.block_hints .datepick-unselectable .wpbc-cell-box{
    background: var(--wpbc_cal-main-background-color);
    background: rgb( from var(--wpbc_cal-unavailable-day-color) r g b / var( --wpbc_cal-day-bg-color-opacity ) );
    background: var(--wpbc_cal-unavailable-day-color);
    border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-unavailable-day-color);
}
/* A V A I L A B L E  - Text A */
.block_hints .block_free a,
.block_hints .block_time,
.datepick-inline .date_available a{
    color: var(--wpbc_cal-available-text-color);
    font-weight: 600;
    text-shadow: none;
}
/*******************************************************************************/

/* T I M E   S L O T S */
.block_hints .block_time,
.datepick-inline .timespartly{

}
/*******************************************************************************/

/* A P P R O V E D  - BACKGROUND */
.block_hints .date_approved.block_check_in_out,
.block_hints .block_booked,
.datepick-inline .date_approved .wpbc-cell-box,
/* A P P R O V E D  - BACKGROUND for Check In Pending & Check Out Approved ||  Check Out Pending & Check In Approved   Dates    //FixIn: 6.0.1.2 */
td.timespartly.check_in_time.check_out_time.check_in_time_date2approve.check_out_time_date_approved div.check-in-div,
td.timespartly.check_in_time.check_out_time.check_out_time_date2approve.check_in_time_date_approved div.check-out-div {
    background: transparent;
    background: rgb( from var(--wpbc_cal-approved-day-color) r g b / var( --wpbc_cal-day-bg-color-opacity ) );
    border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-approved-day-color);
}
/* A P P R O V E D  -  T E X T /including partially booked - timeslots/ */
.block_hints .date_approved.block_check_in_out,
.block_hints .block_booked,
.datepick-inline .date_approved .wpbc-cell-box,
.block_hints .block_booked a,
.datepick-inline .date_approved a{
    color: var( --wpbc_cal-approved-text-color );
    font-weight: 600;
    text-shadow: none;
}
/* CHECK IN and CHECK OUT  Borders for the approved cells - the COLOR have to be the SAME as BACKGROUND of this cell*/
.block_hints .date_approved.block_check_in_out div.check-in-div,                /* Item  for the LEGEND */
.datepick-inline .date_approved.timespartly.check_in_time div.check-in-div{
    border-right: 1px dotted var( --wpbc_cal-approved-day-color );
}
.block_hints .date_approved.block_check_in_out div.check-out-div,               /* Item  for the LEGEND */
.datepick-inline .date_approved.timespartly.check_out_time div.check-out-div{
    border-left: 1px dotted var( --wpbc_cal-approved-day-color );
}
/*******************************************************************************/

/* P E N D I N G  - BACKGROUND */
.block_hints .date2approve.block_check_in_out,
.block_hints .block_pending ,
.datepick-inline .date2approve .wpbc-cell-box,
/* P E N D I N G  - BACKGROUND for Check In Approved & Check Out Pending ||  Check Out Approved & Check In Pending    Dates     //FixIn: 6.0.1.2  */
td.timespartly.check_in_time.check_out_time.check_in_time_date_approved.check_out_time_date2approve div.check-in-div,
td.timespartly.check_in_time.check_out_time.check_out_time_date_approved.check_in_time_date2approve div.check-out-div {
    background: transparent;
    background: rgb( from var(--wpbc_cal-pending-day-color) r g b / var(--wpbc_cal-day-bg-color-opacity) );
    border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-pending-day-color);
}
/* P E N D I N G  -  T E X T /including partially booked - timeslots/ */
.block_hints .date2approve.block_check_in_out,
.block_hints .block_pending,
.datepick-inline .date2approve .wpbc-cell-box,
.block_hints .block_pending a,
.datepick-inline .date2approve a {
    color: var(--wpbc_cal-pending-text-color);
    font-weight: 600;
    text-shadow: none;
}
/* Strike Text  for booked dates */
.block_hints .block_pending span *:after,
.datepick-inline .date_approved span:after ,
.block_hints .block_booked span *:after,
.datepick-inline .date2approve span:after {
    border-top: 0px solid;
    position: absolute;
    content: "";
    right: 0;
    top:calc(50% + 1px);
    left: 25%;
    width: 50%;
}
/*******************************************************************************/
/* TIME SLOTs (partially booked) - BACKGROUND */
.datepick-inline .date2approve.timespartly  .wpbc-cell-box,
.datepick-inline .date_approved.timespartly  .wpbc-cell-box{
    background: transparent;
    background: rgb( from var(--wpbc_cal-timespartly-day-color) r g b / var(--wpbc_cal-day-bg-color-opacity) );
    border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-timespartly-day-color);
}
/* TIME SLOTs (partially booked) - TEXT */
.datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots,
.datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots,
.datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) a,
.datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) a,
.datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) span,
.datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) span
{
    color: var(--wpbc_cal-timespartly-text-color);
    font-weight: 600;
    text-shadow: none;
}
/*******************************************************************************/
/* CHECK IN and CHECK OUT  Borders for the Pending cells - the COLOR have to be the SAME as BACKGROUND of this cell*/
.block_hints .date2approve.block_check_in_out div.check-in-div,                 /* Item  for the LEGEND */
.datepick-inline .date2approve.timespartly.check_in_time div.check-in-div{
    border-right: 1px dotted var( --wpbc_cal-pending-day-color );
}
.block_hints .date2approve.block_check_in_out div.check-out-div,                /* Item  for the LEGEND */
.datepick-inline .date2approve.timespartly.check_out_time div.check-out-div{
    border-left: 1px dotted var( --wpbc_cal-pending-day-color );
}
/*******************************************************************************/

/* S E L E C T E D   Dates - Background */
.datepick-inline div.datepick-one-month .datepick td.datepick-current-day .wpbc-cell-box{
    background: transparent;
    background: rgb( from var(--wpbc_cal-selected-day-color) r g b / max( var(--wpbc_cal-day-bg-color-opacity), var(--wpbc_cal-selected-day-bg-color-opacity) ) );
    border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-selected-day-color);
}
/* S E L E C T E D   Dates - Text color */
/* S E L E C T E D   Dates - Text color */
.datepick-inline div.datepick-one-month .datepick td.datepick-current-day .wpbc_time_dots,                               /*  //FixIn: 8.9.4.13 */
.datepick-inline div.datepick-one-month .datepick td.datepick-current-day a,
.datepick-inline div.datepick-one-month .datepick td.datepick-current-day a:hover {
    color: var(--wpbc_cal-selected-text-color);
    text-shadow: none;
}
/*******************************************************************************/

/* C e l l   O V E R   Dates - Background */
.wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock.datepick-days-cell-over  .wpbc-cell-box,
.datepick-inline .datepick .datepick-days-cell-over  .wpbc-cell-box{
    background: transparent;
    background: rgb( from var(--wpbc_cal-hover-day-color) r g b / var(--wpbc_cal-day-bg-color-opacity) );
    border: var( --wpbc_cal-day-cell-border-width ) solid var( --wpbc_cal-hover-day-color );
}
/* C e l l   O V E R   Dates - Text color */
.datepick-inline  .datepick-one-month .datepick .datepick-days-cell-over .wpbc_time_dots,                                                /*  //FixIn: 8.9.4.13 */
.datepick-inline  .datepick-one-month .datepick td.datepick-days-cell-over a:hover,
.datepick-inline  .datepick-one-month .datepick td.datepick-days-cell-over a{
    color: var( --wpbc_cal-hover-text-color );
    text-shadow: none;
}
/*******************************************************************************/
/* FixIn: 6.0.1.2 */
/* Text style for Check In Approved & Check Out Pending ||  Check Out Approved & Check In Pending || Check In Pending & Check Out Approved ||  Check Out Pending & Check In Approved   */
td.timespartly.check_in_time.check_out_time.check_in_time_date_approved.check_out_time_date2approve span,
td.timespartly.check_in_time.check_out_time.check_out_time_date_approved.check_in_time_date2approve span,
td.timespartly.check_in_time.check_out_time.check_in_time_date2approve.check_out_time_date_approved span,
td.timespartly.check_in_time.check_out_time.check_out_time_date2approve.check_in_time_date_approved span {
    font-weight: 600;
    text-shadow: none;
}

/* Show partially (time-slots) booked days with Background color as for available days ********************************/
/* Color as in this section A V A I L A B L E - BACKGROUND */
.wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock  .wpbc-cell-box{
    background: transparent;
    /*background: rgb( from var(--wpbc_cal-timespartly-day-color) r g b / var(--wpbc_cal-day-bg-color-opacity) );*/
}
/* Same as in this Section above --- A V A I L A B L E  - Text A  */
/* TIME SLOTs (partially booked) - TEXT */
.wpbc_timeslot_day_bg_as_available .datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots,
.wpbc_timeslot_day_bg_as_available .datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots,
.wpbc_timeslot_day_bg_as_available .datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) a,
.wpbc_timeslot_day_bg_as_available .datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) a,
.wpbc_timeslot_day_bg_as_available .datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) span,
.wpbc_timeslot_day_bg_as_available .datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) span{
    color: var(--wpbc_cal-timespartly-text-color);
    font-weight: 600;
    text-shadow: none;
}
.wpbc_timeslot_day_bg_as_available .datepick-inline .timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots{
  font-weight: 600;
}
/*  Same as in this Section above --- S E L E C T E D   Dates - Text color */
.wpbc_timeslot_day_bg_as_available .datepick-inline .datepick-one-month .datepick .times_clock.date_available.datepick-current-day a{
    color: #EEEEEE;
    text-shadow: none;
}
/*   Same as in this Section above --- A V A I L A B L E  and UNSELECTABLE - Text */
.wpbc_timeslot_day_bg_as_available .datepick-inline .date_available {
  color: #CCCCCC;                                                               /* This style for the unavailable date, when we are select the dates */
  text-shadow: none;                                                 /* This style for the unavailable date, when we are select the dates */
}
.datepick-inline .date_available span {
    text-shadow: none;
}

/*******************************************************************************/
/*  CHECK IN / OUT      as          P.O.L.Y.G.O.N.S        //FixIn: 8.9.4.13   */
/*******************************************************************************/
/* Fill diagonal check  in/out items with AVAILABLE background color */
.wpbc-cell-box .wpbc-diagonal-el svg polygon{
    fill: var(--wpbc_cal-available-day-color);
}
  .datepick-inline .datepick-one-month .datepick td.datepick-days-cell.datepick-current-day .wpbc-cell-box .wpbc-diagonal-el {
      display: none;
  }
  .datepick-current-day .wpbc-cell-box  .wpbc-diagonal-el svg polygon {
      fill: var(--wpbc_cal-selected-day-color);
      display: block;
  }
/* Firstly we define background of the day cells background as available */
.datepick-inline td.datepick-days-cell.check_in_time .wpbc-cell-box,
.datepick-inline td.datepick-days-cell.check_out_time  .wpbc-cell-box{
        /*background-color: var(--wpbc_cal-available-day-color);*/
    background: rgb( from var(--wpbc_cal-available-day-color) r g b / var( --wpbc_cal-day-bg-color-opacity ) );
}
/* C e l l   O V E R   Dates */
.datepick-inline td.datepick-days-cell.check_in_time.datepick-days-cell-over .wpbc-cell-box,
.datepick-inline td.datepick-days-cell.check_out_time.datepick-days-cell-over  .wpbc-cell-box{
  background-color: var(--wpbc_cal-hover-day-color);
}

/* Pending */
.datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date2approve     .wpbc-cell-box .wpbc-co-in svg polygon,     /* Check In  */
.datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date2approve   .wpbc-cell-box .wpbc-co-out svg polygon     /* Check Out */
{
    fill: var( --wpbc_cal-pending-day-color );
    fill-opacity: 50%;
    fill-opacity: max( var( --wpbc_cal-day-bg-color-opacity ), 50% );
}

.datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date2approve .wpbc-cell-box,
.datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date2approve .wpbc-cell-box{
  border: var( --wpbc_cal-day-cell-border-width ) solid var( --wpbc_cal-pending-day-color );
}
/* Approved */
.datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date_approved    .wpbc-cell-box .wpbc-co-in svg polygon,     /* Check In  */
.datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date_approved  .wpbc-cell-box .wpbc-co-out svg polygon     /* Check Out */
{
    fill: var( --wpbc_cal-approved-day-color );
    fill-opacity: 50%;
    fill-opacity: max( var( --wpbc_cal-day-bg-color-opacity ), 50% );
}
.datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date_approved .wpbc-cell-box,
.datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date_approved .wpbc-cell-box{
  border: var( --wpbc_cal-day-cell-border-width ) solid var( --wpbc_cal-approved-day-color );
}
/* --- Styling for Stripe Invoice Confirmation Message --- */
/* Apply styles similar to .confirmation-box */
.wpbc-payment-confirmation {
  padding: 30px; /* Match .confirmation-box */
  border-top: none;
  color: #153448; /* Match .confirmation-box text color */
  font-family: sans-serif; /* Match original inline style */
}

span.wpbc-stripe-lang.wpbc-stripe-lang-en {
    color: #f5efe6 !important;
}

/* Adjust heading/paragraph styles within the confirmation message if needed */
.wpbc-payment-confirmation h2,
.wpbc-payment-confirmation h3 {
    color: #1a1a1a; /* Match original inline style */
}

.wpbc-payment-confirmation p {
    color: #153448; /* Match .confirmation-box text color */
    line-height: 1.6em; /* Match .confirmation-box */
}

.wpbc-payment-confirmation .pay-button { /* Use existing .pay-button styles */
    display: inline-block;
    background-color: #153448; 
    color: #f5efe6 !important; 
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wpbc-payment-confirmation .pay-button:hover {
    background-color: #c2b092; 
    text-decoration: none;
}

/* Ensure the container holding this message allows it to fit */
.wpbc_ty__content_text.wpbc_ty__content_gateways {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}