/* Participant panel geometry and row presentation are intentionally absent here. * They are owned exclusively by product-core/product-parity through the shared * semantic participant contract. This provider file retains only genuine * provider behavior/state exceptions. */ /* CaptainBook-only vacancies/time-slot behavior. */ .zas-booking-product--captainbook { padding: 35px 35px 60px; } .zas-booking-product--captainbook .zas-booking-product__options { display: block; margin-top: 20px; } .zas-booking-product--captainbook .zas-booking-product__time-slot { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 16px; font-weight: 600; } .zas-booking-product--captainbook .zas-booking-product__time-slot + .zas-booking-product__time-slot { margin-top: 14px; } .zas-booking-product--captainbook .zas-booking-product__option-meta, .zas-booking-product--captainbook .zas-booking-product__option-availability { font-size: 13px; text-align: center; } .zas-booking-product--captainbook .zas-booking-product__pricing { display: none; flex-direction: column; margin-top: 15px; } .zas-booking-product--captainbook .zas-booking-product__pricing.is-active { display: flex; } .zas-booking-product--captainbook .zas-booking-product__cta { position: absolute; bottom: -30px; left: 35px; width: calc(100% - 70px); } @media (max-width: 768px) { .zas-booking-product--captainbook { padding-bottom: 60px !important; } .zas-booking-product--captainbook .zas-booking-product__cta { left: 20px; } } @media (max-width: 380px) { .zas-booking-product--captainbook .zas-booking-product__time-slot { font-size: 14px !important; } } /* Centralized legacy visual-parity layer. * Retained under the canonical flatpickr-everywhere owner because these rules * control provider-specific dynamic states and modal/layout behavior that is * not safely representable by the shared semantic core alone. No provider * plugin owns or enqueues a separate product stylesheet. */ @media (max-width: 380px) { body.zas-booking-product-page--captainbook .time-section .custom-button { font-size: 14px !important; } } body.zas-booking-product-page--captainbook .auto-selected { border-color: #ffffff !important; pointer-events: none !important; border-radius: 5px !important; } body.zas-booking-product-page--captainbook .price_and_label_holder { padding-bottom: 6px; } body.zas-booking-product-page--captainbook .label-taxes-fees::before, body.zas-booking-product-page--captainbook .label-free-cancel::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: middle; background: url("data:image/svg+xml;utf8,") no-repeat center; background-size: contain; } body.zas-booking-product-page--captainbook div.participants-breakdown>div { font-size: 13px !important; padding-right: 10px; } body.zas-booking-product-page--captainbook .participants-breakdown { position: absolute; top: 114px; display: flex; display: flex; flex-wrap: wrap; } body.zas-booking-product-page--captainbook div.participants-breakdown>div:first-child::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 5px; vertical-align: middle; background: url("data:image/svg+xml;utf8,") no-repeat center; background-size: contain; margin-top: -4px; } /* Devices smaller than 768px (e.g. tablets) */ @media (max-width: 768px) { body.zas-booking-product-page--captainbook .participants-breakdown { position: relative !important; width: 100% !important; top: 0px !important; padding-top: 8px !important; padding-bottom: 8px !important; } body.zas-booking-product-page--captainbook .price-section { margin-top: 30px !important; } body.zas-booking-product-page--captainbook #field-date { margin-top: 20px; } body.zas-booking-product-page--captainbook .booking-module .top-row { padding-bottom: 0px !important; } body.zas-booking-product-page--captainbook .opt-label::after { content: ":"; margin-left: 1px; } body.zas-booking-product-page--captainbook span.opt-places>span.places-left { padding-left: 2px !important; font-weight: 400 !important; } body.zas-booking-product-page--captainbook span.opt-time>span.start-time { padding-left: 2px !important; } body.zas-booking-product-page--captainbook .booking-module { padding: 20px 20px 80px 20px !important; } body.zas-booking-product-page--captainbook .live_availability { margin-bottom: 18px !important; } body.zas-booking-product-page--captainbook .booking-module .top-row { gap: 0px !important; flex-direction: column; } body.zas-booking-product-page--captainbook .time-section .custom-button .opt-places { position: absolute; bottom: 20px; font-size: 14px !important; } body.zas-booking-product-page--captainbook .time-section .custom-button .opt-time { font-weight: 400 !important; margin-bottom: 10px !important; border-right: none !important; justify-content: left !important; padding-left: 0px !important; padding-right: 0px !important; margin-right: -10px; height: 26px !important; border-left: none !important; flex: 0 0 auto !important; } body.zas-booking-product-page--captainbook .time-section .custom-button .opt-label { margin-bottom: 10px !important; justify-content: flex-start !important; padding-right: 4px !important; flex: 0 1 auto !important; text-align: left !important; white-space: normal !important; height: 26px !important; /* display: inline-block !important;*/ } body.zas-booking-product-page--captainbook #custom-book-now { width: calc(100% - 40px) !important; font-weight: 600 !important; margin-right:auto !important; margin-left:auto !important; } body.zas-booking-product-page--captainbook .time-section .custom-button { padding: 17px 20px 36px 20px !important; position: relative; justify-content: start !important; } body.zas-booking-product-page--captainbook .opt-places::before { content: ""; display: inline-block; width: 12px; height: 14px; margin-right: 6px; vertical-align: middle; background: url("data:image/svg+xml;utf8,") no-repeat center; background-size: contain; } } @media (min-width: 769px) { } /******************************************** 1) Hide default WooCommerce Add-to-Cart ********************************************/ body.zas-booking-product-page--captainbook form.cart { display: none !important; } body.zas-booking-product-page--captainbook .single_add_to_cart_button { display: none !important; } /******************************************** 2) Booking Module Wrapper ********************************************/ body.zas-booking-product-page--captainbook .booking-module { background: #0a2640; /* Σκούρο μπλε */ color: #fff; padding: 25px 35px 75px 35px; border-radius: 10px; max-width: 100%; margin: 0 auto; position: relative; } /* top row: participants + date */ body.zas-booking-product-page--captainbook .booking-module .top-row { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 15px; } body.zas-booking-product-page--captainbook .booking-module .inline-field { flex: 1 !important; position: relative !important; } body.zas-booking-product-page--captainbook .time-section { display: none; } /******************************************** 3) Time-section & Custom Buttons ********************************************/ body.zas-booking-product-page--captainbook .time-section { margin-bottom: 15px !important; } /* Κουμπιά επιλογών */ body.zas-booking-product-page--captainbook .time-section .custom-button { display: flex; justify-content: space-between; background-color: #e2f3fa; color: #0a2640; border-radius: 20px; border: none; font-size: 16px; padding: 22px 10px 20px 10px; width: 100%; cursor: pointer; border: 4px solid #e2f3fa; flex-wrap: wrap; } body.zas-booking-product-page--captainbook .time-section .custom-button:hover { background-color: #ffffff !important; } body.zas-booking-product-page--captainbook .time-section .custom-button.selected { background-color: #fff !important; border-color: #ffb900; } /* Τα 3 «κομμάτια» μέσα στο κουμπί */ body.zas-booking-product-page--captainbook .time-section .custom-button .opt-label { font-weight: 600; padding-right: 10px; flex: 1; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; } body.zas-booking-product-page--captainbook .time-section .custom-button .opt-time { font-weight: 400; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; /*border-right: 1px solid #0a2640; border-left: 1px solid #0a2640;*/ flex: none; padding-left: 20px; padding-right: 20px; } body.zas-booking-product-page--captainbook .start-time, body.zas-booking-product-page--captainbook .places-left { font-weight: 600; padding-left: 2px; } body.zas-booking-product-page--captainbook .custom-button-container .custom-button:not(:first-of-type) { margin-top: 14px !important; } body.zas-booking-product-page--captainbook .time-section .custom-button .opt-places { font-weight: 400; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; flex: 1; } body.zas-booking-product-page--captainbook .fare-display { display: flex; flex-direction: column; } body.zas-booking-product-page--captainbook .fare-value { font-size: 26px; padding-left: 4px; font-weight: 600; } body.zas-booking-product-page--captainbook .label-booking-cost { font-weight: 200; font-size: 18px; } /******************************************** 4) Price-section & Participants Breakdown ********************************************/ body.zas-booking-product-page--captainbook .price-section { display: none; justify-content: space-between; align-items: flex-start; } body.zas-booking-product-page--captainbook .price-section .price-breakdown { font-size: 12px !important; display: block !important; margin-top: 4px !important; opacity: 0.8 !important; color: #fff !important; } /******************************************** 5) Book Now button ********************************************/ body.zas-booking-product-page--captainbook #custom-book-now { position: absolute; bottom: -30px; color: #fff; text-align: center; font-size: 20px; font-weight: 200; border-radius: 50px; cursor: pointer; border: none; transition: background 0.2s; height: 70px; line-height: 1.4; margin-left: auto; margin-right: auto; width: calc(100% - 70px); } body.zas-booking-product-page--captainbook .option-title { font-size: 20px; display: block; margin-bottom: 8px; font-weight: 600; margin-top: 30px; } body.zas-booking-product-page--captainbook #custom-book-now:disabled { pointer-events: none; } body.zas-booking-product-page--captainbook #custom-book-now:hover { background: #ffc600; } /******************************************** 6) Participants & Date inputs ********************************************/ body.zas-booking-product-page--captainbook #participants-input, body.zas-booking-product-page--captainbook #datepicker-input { width: 100% !important; border-radius: 15px !important; border: none !important; padding: var(--zas-booking-input-padding, 10px 44px 10px 42px) !important; font-size: 16px !important; color: var(--zas-booking-color-text, #0a2640) !important; background-color: #fff !important; cursor: pointer !important; height: 50px; font-weight: 600; } body.zas-booking-product-page--captainbook #participants-input { padding-left: 42px !important; } body.zas-booking-product-page--captainbook #datepicker-input { padding-left: 42px !important; } body.zas-booking-product-page--captainbook #participants-input:focus, body.zas-booking-product-page--captainbook #datepicker-input:focus { outline: 2px solid #007dc1; } body.zas-booking-product-page--captainbook .icon-person { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background-image: url("../../../images/add-participants-icon.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; } body.zas-booking-product-page--captainbook .drop-down-arrow { display: inline-block; transition: transform 0.3s ease; transform-origin: 50% 25%; /* Ensure it rotates around its center */ } body.zas-booking-product-page--captainbook .drop-down-arrow.rotated { transform: rotate(180deg); } body.zas-booking-product-page--captainbook .drop-down-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 14px; height: 9px; background-image: url("../../../images/drop-down-arrow.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; } body.zas-booking-product-page--captainbook .icon-calendar { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background-image: url("../../../images/calendar-icon.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; } body.zas-booking-product-page--captainbook small { display: block; margin-top: 5px; font-size: 13px !important; } body.zas-booking-product-page--captainbook .person-controls { display: flex; gap: 20px; align-items: center; } body.zas-booking-product-page--captainbook .minus-btn { width: 30px; height: 30px; border: none; } body.zas-booking-product-page--captainbook .plus-btn { width: 30px; height: 30px; border: none; } body.zas-booking-product-page--captainbook .person-controls button { touch-action: manipulation; } /******************************************** 7) Popup panel for participants ********************************************/ body.zas-booking-product-page--captainbook .minus-btn, body.zas-booking-product-page--captainbook .plus-btn { background: #e2f3fa; color: #192e59; border-radius: 50px; width: 40px; height: 40px; font-weight: 100 !important; /* Αφαιρούμε το border */ border: none; cursor: pointer; font-size: 24px; outline: none; /* αν θες να μην εμφανίζεται outline στο focus */ } body.zas-booking-product-page--captainbook .minus-btn:hover, body.zas-booking-product-page--captainbook .plus-btn:hover { background: #cce2ff !important; } /* Το span που δείχνει τον αριθμό */ body.zas-booking-product-page--captainbook .count-span { min-width: 20px; /* Για σταθερό φάρδος */ text-align: center; display: inline-block; font-size: 16px; /* Αν θέλεις λίγο μεγαλύτερο */ } /******************************************** 8) Fare-display & Loading Indicator ********************************************/ body.zas-booking-product-page--captainbook .fare-display { margin-top: 10px !important; font-size: 16px !important; display: none; /* Χωρίς !important, για να μπορεί το JS να κάνει .show() */ color: #fff !important; } body.zas-booking-product-page--captainbook #loading-indicator { display: none !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 100 !important; } body.zas-booking-product-page--captainbook #loading-indicator img { width: 50px !important; height: 50px !important; } body.zas-booking-product-page--captainbook .live_availability { display: flex; font-size: 10px; justify-content: flex-end; text-transform: uppercase; margin-bottom: 20px; line-height: 1; letter-spacing: .9px; } body.zas-booking-product-page--captainbook .live_availibility_label { align-items: center; display: flex; } body.zas-booking-product-page--captainbook .live_availibility_label::before { content: ""; display: inline-block; width: 13px; height: 13px; background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 5 9.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.114,10.227l1.375,-4.386l-1.489,-0l4.386,-5.841l-1.352,4.46l1.466,-0l-4.386,5.767Z' fill='%23fff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } /* CaptainBook date field loading state (aligned with Travelotopos UX) */ body.zas-booking-product-page--captainbook .booking-module #field-date.is-loading #datepicker-input { padding-right: 78px !important; pointer-events: none; cursor: progress !important; } body.zas-booking-product-page--captainbook .booking-module #field-date .cb-inline-field-spinner { position: absolute; right: 38px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); display: none; pointer-events: none; z-index: 2; } body.zas-booking-product-page--captainbook .booking-module #field-date .cb-inline-field-spinner img { width: 100%; height: 100%; display: block; } body.zas-booking-product-page--captainbook .booking-module #field-date.is-loading .drop-down-arrow { opacity: .45; } /* CaptainBook options loading state */ body.zas-booking-product-page--captainbook .booking-module.cb-options-loading .custom-button-container { opacity: 1; } body.zas-booking-product-page--captainbook .cb-options-loading-card { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 86px; padding: 22px 18px; border-radius: 16px; background: #ffffff; color: #0a2640; font-size: 17px; font-weight: 600; box-sizing: border-box; } body.zas-booking-product-page--captainbook .cb-options-spinner, body.zas-booking-product-page--captainbook .cb-booking-spinner { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex: 0 0 auto; } body.zas-booking-product-page--captainbook .cb-options-spinner img, body.zas-booking-product-page--captainbook .cb-booking-spinner img { display: block; width: 100%; height: 100%; } body.zas-booking-product-page--captainbook .cb-options-spinner { width: 32px; height: 32px; } body.zas-booking-product-page--captainbook .cb-booking-spinner { width: 28px; height: 28px; } body.zas-booking-product-page--captainbook #custom-book-now.cb-booking-loading { display: inline-flex !important; align-items: center; justify-content: center; gap: 12px; cursor: progress !important; } body.zas-booking-product-page--captainbook #custom-book-now.cb-booking-loading .cb-booking-loading-label { display: inline-block; } /* Keep the CaptainBook CTA painted even when theme/provider button styles change order. */ body.zas-booking-product-page--captainbook #custom-book-now { background-color: #ffb900 !important; } body.zas-booking-product-page--captainbook #custom-book-now:hover { background-color: #ffc600 !important; } body.zas-booking-product-page--captainbook #custom-book-now:disabled { background-color: #ffb900 !important; opacity: 1 !important; }