@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@300;400;500;600&display=swap"); .nlb-booking-widget {
max-width: 100%;
margin: 30px 0;
font-family: 'Open Sans', sans-serif;
} .nlb-icon-calendar {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
} .nlb-booking-calendar-wrapper {
background: #ffffff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(2, 78, 114, 0.08);
border: 1px solid #D6EAF3;
}
.nlb-booking-calendar-wrapper h3 {
margin: 0 0 24px;
font-size: 22px;
font-weight: 600;
color: #024E72;
font-family: 'Montserrat', sans-serif;
}
.nlb-booking-calendar-wrapper h3 svg {
color: #F3780D;
}
.nlb-calendar-container {
margin: 20px 0;
} .nlb-date-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 24px;
}
.nlb-date-input-group {
position: relative;
}
.nlb-date-input-group label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: #9CA3AF;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.nlb-date-input-group input {
width: 100%;
padding: 14px 16px;
border: 2px solid #D6EAF3;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
color: #111827;
background: white;
cursor: pointer;
transition: all 0.2s;
font-family: 'Open Sans', sans-serif;
}
.nlb-date-input-group input:hover {
border-color: #024E72;
background: #F8FBFD;
}
.nlb-date-input-group input:focus {
outline: none;
border-color: #F3780D;
box-shadow: 0 0 0 3px rgba(243, 120, 13, 0.1);
}
.nlb-checkin-group.active input,
.nlb-checkout-group.active input {
border-color: #F3780D;
background: #FFF7F0;
} .nlb-guests-group {
margin-bottom: 20px;
}
.nlb-guests-group label {
display: block;
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
.nlb-guests-group select {
width: 100%;
padding: 18px 20px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 16px;
color: #333333;
background: white;
cursor: pointer;
transition: all 0.2s;
box-sizing: border-box;
} .nlb-calendar-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
display: none;
} .nlb-calendar-wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 0;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 12px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
z-index: 9999;
width: 850px;
max-width: calc(100vw - 40px);
max-height: calc(100vh - 40px);
overflow-y: auto;
display: none; } .nlb-calendar-header {
padding: 24px 32px;
border-bottom: 1px solid #e5e7eb;
}
.nlb-calendar-date-selector {
display: flex;
gap: 24px;
margin-bottom: 16px;
} .nlb-calendar-dates {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.nlb-calendar-checkin,
.nlb-calendar-checkout {
flex: 1;
padding: 14px 20px;
border: 2px solid #D6EAF3;
border-radius: 8px;
cursor: pointer;
position: relative;
transition: all 0.2s;
background: white;
}
.nlb-calendar-checkin:hover,
.nlb-calendar-checkout:hover {
border-color: #024E72;
background: #F8FBFD;
}
.nlb-calendar-checkin.active,
.nlb-calendar-checkout.active {
border-color: #F3780D;
background: #FFF7F0;
}
.nlb-calendar-checkin label,
.nlb-calendar-checkout label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: #9CA3AF;
margin-bottom: 4px;
letter-spacing: 0.5px;
}
.nlb-calendar-date-value {
display: flex;
justify-content: space-between;
align-items: center;
}
.nlb-calendar-date-value span {
font-size: 14px;
color: #111827;
font-weight: 500;
}
.nlb-calendar-date-box {
flex: 1;
padding: 14px 20px;
border: 1px solid #D6EAF3;
border-radius: 8px;
cursor: pointer;
position: relative;
transition: all 0.2s;
}
.nlb-calendar-date-box:hover {
border-color: #024E72;
background: #F8FBFD;
}
.nlb-calendar-date-box.active {
border-color: #F3780D;
background: #FFF7F0;
}
.nlb-calendar-date-box label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: #9CA3AF;
margin-bottom: 4px;
letter-spacing: 0.5px;
}
.nlb-calendar-date-box .date-value {
font-size: 15px;
color: #333333;
font-family: 'Open Sans', sans-serif;
}
.nlb-clear-single-date {
background: none;
border: none;
font-size: 20px;
color: #717171;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: none; align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s;
}
.nlb-clear-single-date:hover {
background: #f3f4f6;
color: #222;
} .nlb-calendar-body {
padding: 20px 32px 32px;
} .nlb-calendar-footer {
padding: 16px 32px;
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
gap: 12px;
}
.nlb-calendar-footer button {
padding: 10px 20px;
border: 1px solid #D6EAF3;
background: white;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
transition: all 0.2s;
color: #024E72;
}
.nlb-calendar-footer button:hover {
background: #F8FBFD;
border-color: #024E72;
}
.nlb-close-calendar {
background: #024E72 !important;
color: white !important;
}
.nlb-close-calendar:hover {
background: #0A6FA6 !important;
}  .flatpickr-calendar {
font-family: 'Open Sans', sans-serif;
box-shadow: none;
border: none;
background: transparent;
width: auto !important;
}
.flatpickr-calendar.inline {
display: block;
position: relative;
top: 0;
}
.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
display: none;
} .flatpickr-calendar.multiMonth {
width: auto !important;
}
.flatpickr-calendar.multiMonth .flatpickr-months {
display: flex !important;
gap: 20px;
}
.flatpickr-calendar.multiMonth .flatpickr-month {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
flex: 1;
}
.flatpickr-calendar.multiMonth .flatpickr-innerContainer {
display: inline-block !important;
}
.flatpickr-calendar.multiMonth .flatpickr-monthContainer {
display: inline-block !important;
float: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days {
width: auto !important;
}
.flatpickr-calendar.multiMonth .dayContainer {
width: auto !important;
} .flatpickr-month {
background: transparent;
color: #024E72;
height: 50px;
line-height: 1;
text-align: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.flatpickr-current-month {
font-size: 18px;
font-weight: 600;
color: #024E72;
font-family: 'Montserrat', sans-serif;
position: relative;
width: auto;
left: 0;
padding: 8px 0;
line-height: 1;
height: auto;
display: block;
text-align: center;
}
.flatpickr-monthDropdown-months,
.flatpickr-current-month .flatpickr-monthDropdown-months {
display: inline-block;
font-size: 18px;
font-weight: 600;
color: #024E72;
}
.flatpickr-current-month .numInputWrapper {
display: inline-block;
margin-left: 8px;
}
.flatpickr-current-month input.cur-year {
font-size: 18px;
font-weight: 600;
color: #024E72;
background: transparent;
border: none;
width: 60px;
}
.flatpickr-prev-month,
.flatpickr-next-month {
text-decoration: none;
cursor: pointer;
position: absolute;
top: 0;
height: 34px;
padding: 10px;
z-index: 3;
color: #024E72;
fill: #024E72;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
color: #F3780D;
fill: #F3780D;
}
.flatpickr-prev-month {
left: 0;
}
.flatpickr-next-month {
right: 0;
} .flatpickr-weekdays {
background: transparent;
text-align: center;
overflow: hidden;
width: 100%;
display: flex;
align-items: center;
height: 28px;
margin-bottom: 8px;
}
.flatpickr-weekdaycontainer {
display: flex;
width: 100%;
}
span.flatpickr-weekday {
cursor: default;
font-size: 90%;
background: transparent;
color: #9CA3AF;
line-height: 1;
margin: 0;
text-align: center;
display: block;
flex: 1;
font-weight: 600;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.5px;
} .flatpickr-days {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-start;
width: 307.875px;
}
.flatpickr-days:focus {
outline: 0;
}
.dayContainer {
padding: 0;
outline: 0;
text-align: left;
width: 307.875px;
min-width: 307.875px;
max-width: 307.875px;
box-sizing: border-box;
display: inline-block;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
transform: translate3d(0px, 0px, 0px);
} .flatpickr-day {
background: none;
border: 1px solid transparent;
border-radius: 8px;
box-sizing: border-box;
cursor: pointer;
font-weight: 400;
width: 14.2857143%;
flex-basis: 14.2857143%;
max-width: 43px;
height: 43px;
line-height: 43px;
margin: 0;
display: inline-block;
position: relative;
justify-content: center;
text-align: center;
color: #333333;
font-size: 14px;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
background: #f3f4f6;
border-color: #e5e7eb;
cursor: pointer;
outline: 0;
}
.flatpickr-day.today {
border-color: #024E72;
font-weight: 600;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
border-color: #024E72;
background: #024E72;
color: white;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
background: #F3780D;
box-shadow: none;
color: #fff;
border-color: #F3780D;
font-weight: 600;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover.prevMonthDay.inRange,
.flatpickr-day:hover.nextMonthDay.inRange,
.flatpickr-day:focus.prevMonthDay.inRange,
.flatpickr-day:focus.nextMonthDay.inRange {
cursor: pointer;
outline: 0;
background: rgba(243, 120, 13, 0.1);
box-shadow: none;
border-color: transparent;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
color: rgba(57, 57, 57, 0.3);
background: transparent;
border-color: transparent;
cursor: default;
}
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
cursor: not-allowed;
color: rgba(57, 57, 57, 0.1);
}
.flatpickr-day.week.selected {
border-radius: 0;
box-shadow: none;
}
.flatpickr-day.hidden {
visibility: hidden;
} .flatpickr-day.nlb-blocked-date,
.flatpickr-day.nlb-blocked-date:hover {
background: repeating-linear-gradient(
45deg,
#f5f5f5,
#f5f5f5 5px,
#e8e8e8 5px,
#e8e8e8 10px
);
color: #999999;
cursor: not-allowed;
font-weight: 300;
border-color: #e0e0e0;
} .nlb-booking-form {
margin-top: 20px;
padding-top: 20px;
border-top: 2px solid #e5e7eb;
display: none; } .nlb-calendar-summary {
display: none; padding: 12px 16px;
background: #F8FBFD;
border-radius: 8px;
border: 1px solid #D6EAF3;
margin-top: 12px;
}
.nlb-nights-count {
font-weight: 600;
color: #024E72;
margin-right: 12px;
}
.nlb-date-range {
color: #6B7280;
}
.nlb-form-row {
display: block;
margin-bottom: 20px;
}
.nlb-form-group {
margin-bottom: 16px;
}
.nlb-form-col {
width: 100%;
max-width: 100%;
} .nlb-form-separator {
height: 1px;
background: #e5e7eb;
margin: 24px 0;
border: none;
} .nlb-booking-form h4 {
font-size: 16px;
font-weight: 600;
color: #024E72;
margin-bottom: 16px;
margin-top: 0;
font-family: 'Montserrat', sans-serif;
}
.nlb-form-group label {
display: block;
font-size: 13px;
font-weight: 400;
color: #6b7280;
margin-bottom: 8px;
}
.nlb-form-group input,
.nlb-form-group textarea,
.nlb-form-group select {
width: 100%;
padding: 18px 20px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 16px;
color: #333333;
background: white;
transition: all 0.2s;
font-family: 'Open Sans', sans-serif;
box-sizing: border-box;
line-height: 1.5;
}
.nlb-form-group input:focus,
.nlb-form-group textarea:focus,
.nlb-form-group select:focus {
outline: none;
border-color: #F3780D;
box-shadow: 0 0 0 3px rgba(243, 120, 13, 0.1);
}
.nlb-form-group textarea {
resize: vertical;
min-height: 140px;
} .nlb-phone-wrapper .iti {
width: 100%;
--iti-border-color: #e5e7eb;
--iti-hover-color: rgba(243, 120, 13, 0.1);
--iti-input-padding: 14px;
}
.nlb-phone-wrapper input#nlb-phone-input {
height: 50px;
font-size: 16px;
border: 1px solid #e5e7eb;
border-radius: 4px;
padding-left: 100px;
}
.nlb-phone-wrapper input#nlb-phone-input:focus {
outline: none;
border-color: #F3780D;
box-shadow: 0 0 0 3px rgba(243, 120, 13, 0.1);
}
.nlb-phone-wrapper .iti__country-container {
border-right: 1px solid #e5e7eb;
background: #f9fafb;
border-radius: 4px 0 0 4px;
}
.nlb-phone-wrapper .iti__selected-country-primary {
background: transparent !important;
padding: 0 6px 0 12px;
}
.nlb-phone-wrapper .iti__selected-country-primary:hover,
.nlb-phone-wrapper .iti__selected-country-primary:focus,
.nlb-phone-wrapper .iti__selected-country:hover,
.nlb-phone-wrapper .iti__selected-country:focus,
.nlb-phone-wrapper .iti__country-container:hover,
.nlb-phone-wrapper .iti__country-container:focus {
background: #f9fafb !important;
}
.nlb-phone-wrapper .iti__selected-dial-code {
color: #374151 !important;
}
.nlb-phone-wrapper .iti__dropdown-content {
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
margin-top: 4px;
}
.nlb-phone-wrapper .iti__search-input {
padding: 10px 12px;
}
.nlb-phone-wrapper .iti__country:hover {
background: #fef5ec;
}
.nlb-phone-wrapper .iti__country--highlight {
background: #F3780D;
} .nlb-payment-methods {
margin: 20px 0;
}
.nlb-payment-method {
display: flex;
align-items: flex-start;
padding: 18px 20px;
border: 1px solid #e5e7eb;
border-radius: 4px;
margin-bottom: 12px;
cursor: pointer;
transition: all 0.2s;
background: white;
min-height: 65px;
}
.nlb-payment-method:hover {
border-color: #F3780D;
background: #fef5ec;
}
.nlb-payment-method input[type="radio"] {
margin-right: 15px;
margin-top: 2px;
}
.nlb-payment-method.selected {
border: 2px solid #F3780D;
padding: 17px 19px;
background: white;
}
.nlb-payment-icon {
font-size: 20px;
margin-right: 12px;
margin-top: -2px;
}
.nlb-payment-info {
flex: 1;
}
.nlb-payment-label {
font-size: 14px;
font-weight: 600;
color: #111827;
display: block;
margin-bottom: 4px;
}
.nlb-payment-description {
font-size: 13px;
color: #6b7280;
line-height: 1.4;
} .nlb-price-display {
background: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 16px;
margin-bottom: 20px;
}
.nlb-price-row {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
align-items: center;
}
.nlb-price-row:first-child {
font-size: 18px;
font-weight: 600;
color: #024E72;
margin-bottom: 8px;
}
.nlb-price-row:last-child {
font-size: 14px;
color: #6b7280;
border: none;
padding-top: 0;
font-weight: normal;
margin-bottom: 0;
}
.nlb-price-label {
color: #6B7280;
}
.nlb-price-value {
color: #111827;
font-weight: 600;
} .nlb-submit-btn {
background: #F3780D;
color: white;
padding: 18px 32px;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: 'Open Sans', sans-serif;
width: 100%;
margin-top: 24px;
min-height: 56px;
}
.nlb-submit-btn:hover {
background: #E56A0C;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(243, 120, 13, 0.3);
}
.nlb-submit-btn:disabled {
background: #CBD5E1;
cursor: not-allowed;
transform: none;
box-shadow: none;
} @media (max-width: 768px) {
.nlb-calendar-wrapper {
width: 100%;
max-width: calc(100vw - 20px);
padding: 0;
}
.nlb-calendar-header {
padding: 20px;
}
.nlb-calendar-body {
padding: 20px;
}
.nlb-calendar-footer {
padding: 12px 20px;
}
.nlb-date-inputs,
.nlb-form-row {
grid-template-columns: 1fr;
}
.nlb-calendar-dates {
flex-direction: column;
}
.flatpickr-calendar.multiMonth .flatpickr-months {
flex-direction: column;
}
.flatpickr-days,
.dayContainer {
width: 100%;
min-width: 100%;
max-width: 100%;
}
}.nlb-confirmation-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.nlb-confirmation-modal.show {
display: flex;
} .nlb-modal-content {
background: white;
border-radius: 16px;
max-width: 600px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
} .nlb-modal-close {
position: absolute;
top: 15px;
right: 15px;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
z-index: 10;
}
.nlb-modal-close:hover {
background: white;
transform: scale(1.1);
}
.nlb-modal-close svg {
width: 16px;
height: 16px;
stroke: #333;
} .nlb-modal-header {
background: linear-gradient(135deg, #024E72 0%, #0A6FA6 100%);
color: white;
padding: 30px;
border-radius: 16px 16px 0 0;
text-align: center;
}
.nlb-modal-header h2 {
margin: 0 0 10px;
font-size: 28px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.nlb-modal-header .booking-code {
background: rgba(255, 255, 255, 0.2);
padding: 8px 16px;
border-radius: 8px;
font-size: 20px;
font-weight: 600;
display: inline-block;
margin-top: 10px;
font-family: 'Montserrat', sans-serif;
letter-spacing: 1px;
} .nlb-modal-body {
padding: 30px;
} .nlb-booking-details {
background: #F8FBFD;
border: 1px solid #D6EAF3;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
}
.nlb-booking-details h3 {
margin: 0 0 15px;
color: #024E72;
font-size: 18px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.nlb-detail-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid rgba(214, 234, 243, 0.5);
}
.nlb-detail-row:last-child {
border-bottom: none;
}
.nlb-detail-label {
color: #666;
font-size: 14px;
}
.nlb-detail-value {
color: #333;
font-weight: 600;
font-size: 14px;
} .nlb-payment-instructions {
background: #FFF4E6;
border: 1px solid #F3780D;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
}
.nlb-payment-instructions h3 {
margin: 0 0 15px;
color: #F3780D;
font-size: 18px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.nlb-bank-details {
background: white;
padding: 15px;
border-radius: 8px;
margin-top: 15px;
font-family: 'Courier New', monospace;
}
.nlb-bank-details p {
margin: 5px 0;
font-size: 14px;
} .nlb-payment-stripe {
background: #E8F4FD;
border: 2px solid #1A73E8;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
text-align: center;
}
.nlb-payment-stripe h3 {
margin: 0 0 10px;
color: #1A73E8;
font-size: 18px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.nlb-payment-stripe p {
margin: 0 0 15px;
color: #666;
}
.nlb-btn-stripe {
background: #1A73E8;
color: white;
padding: 12px 30px;
border: none;
border-radius: 8px;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 10px;
}
.nlb-btn-stripe:hover {
background: #1557B0;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}
.nlb-btn-stripe svg {
width: 20px;
height: 20px;
} .nlb-modal-actions {
display: flex;
gap: 15px;
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid #E5E7EB;
}
.nlb-modal-actions button,
.nlb-modal-actions a {
flex: 1;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
text-align: center;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.nlb-btn-print {
background: #024E72;
color: white;
flex: 1;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
text-align: center;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.nlb-btn-print:hover {
background: #0A6FA6;
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(2, 78, 114, 0.3);
}
.nlb-btn-print:focus,
.nlb-btn-print:active {
background: #024E72 !important;
color: white !important;
outline: none;
}
.nlb-btn-close {
background: #F3780D;
color: white;
}
.nlb-btn-close:hover {
background: #e06a0c;
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(243, 120, 13, 0.3);
} #nlb-loading-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.nlb-loading-content {
background: white;
padding: 30px;
border-radius: 12px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.nlb-loading-spinner {
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top: 4px solid #024E72;
border-radius: 50%;
animation: nlb-spin 1s linear infinite;
margin: 0 auto 20px;
} .nlb-loading-text {
color: #333;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
} @media (max-width: 600px) {
.nlb-modal-content {
margin: 20px;
max-height: calc(100vh - 40px);
}
.nlb-modal-header {
padding: 20px;
}
.nlb-modal-header h2 {
font-size: 22px;
}
.nlb-modal-header .booking-code {
font-size: 16px;
padding: 6px 12px;
}
.nlb-modal-body {
padding: 20px;
}
.nlb-modal-actions {
flex-direction: column;
}
.nlb-modal-actions button,
.nlb-modal-actions a {
width: 100%;
}
} @media print {
body > *:not(.nlb-confirmation-modal) {
display: none !important;
}
.nlb-confirmation-modal {
display: block !important;
position: static !important;
background: transparent !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.nlb-modal-content {
max-width: none !important;
width: 100% !important;
box-shadow: none !important;
border: none !important;
margin: 0 !important;
border-radius: 0 !important;
}
.nlb-modal-close,
.nlb-modal-actions,
.nlb-btn-stripe {
display: none !important;
}
.nlb-modal-header {
background: none !important;
color: #024E72 !important;
border-bottom: 2px solid #024E72 !important;
page-break-after: avoid !important;
}
.nlb-modal-header h2 {
color: #024E72 !important;
}
.nlb-modal-header .booking-code {
background: #024E72 !important;
color: white !important;
}
.nlb-booking-details,
.nlb-payment-instructions {
page-break-inside: avoid !important;
border: 1px solid #ddd !important;
}
.nlb-bank-details {
background: #f5f5f5 !important;
border: 1px solid #333 !important;
} .nlb-confirmation-modal {
page-break-inside: avoid !important;
page-break-before: auto !important;
page-break-after: avoid !important;
}
}