/* ============================================================ DAMIAN PHILPOTT — BOOKNETIC MASTER CSS ============================================================ Current complete working stylesheet, including the latest iPhone account-detection horizontal-width fix. Load with: Simple Custom CSS and JS → External File → → Frontend Keep Booknetic's own Custom CSS box empty. ============================================================ */ :root { --booknetic-secondary-design-color:#FFD700!important } #booknetic_theme_8 .booknetic_appointment_container { background:#000000!important; width:calc(100% - 230px); position:relative; height:100%; overflow:hidden } #booknetic_theme_8 .booknetic_appointment_container_body { background:#000000!important } .booknetic-body { margin:0; padding:0; background:#000000!important } @media screen and (max-width:1000px) { #booknetic_theme_8 { width:100%!important; max-width:100%!important } #booknetic_theme_8 .booknetic_appointment_container { width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; padding-left:0!important; padding-right:0!important } } .navigation>ul>li>a { transition:.3s; display:table-cell; position:relative; max-width:130px; height:75px; vertical-align:middle; line-height:1.2em; text-align:center; font-size:14px; text-transform:uppercase } #booknetic_theme_8 .booknetic_appointment_container:has( [data-step-id="staff"][style*="display:block"] ) { height:auto!important; min-height:0!important; overflow:visible!important } #booknetic_theme_8 .booknetic_appointment_container_body:has( [data-step-id="staff"][style*="display:block"] ) { height:auto!important; min-height:0!important; overflow:visible!important } #booknetic_theme_8 [data-step-id="staff"][style*="display:block"] { position:relative!important; height:auto!important; min-height:0!important; overflow:visible!important; padding-bottom:24px!important } #booknetic_theme_8 .booknetic_card_container { display:flex!important; flex-wrap:wrap!important; align-items:flex-start!important; justify-content:flex-start!important; gap:18px!important; width:100%!important; height:auto!important; min-height:0!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_card { position:relative!important; width:210px!important; min-width:210px!important; height:auto!important; padding:18px 16px!important; background:#050505!important; border:1px solid #252525!important; border-radius:3px!important; box-shadow:none!important; box-sizing:border-box!important; text-align:center!important; overflow:visible!important; transition:border-color .2s ease,background-color .2s ease!important } #booknetic_theme_8 .booknetic_card:not(.booknetic_card_selected)::after { display:none!important; content:none!important; background-image:none!important } #booknetic_theme_8 .booknetic_card:hover { background:#080808!important; border-color:#666666!important } #booknetic_theme_8 .booknetic_card.booknetic_card_selected { background:#080808!important; border:1px solid #FFD700!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_card_image { width:68px!important; height:68px!important; margin-left:auto!important; margin-right:auto!important; margin-bottom:12px!important; flex-shrink:0!important } #booknetic_theme_8 .booknetic_card_title { width:100%!important; text-align:center!important; overflow:visible!important } #booknetic_theme_8 .booknetic_card_title_first { color:#FFD700!important; font-size:14px!important; font-weight:600!important; line-height:20px!important; text-align:center!important } #booknetic_theme_8 .booknetic_card_description { width:100%!important; max-width:none!important; text-align:center!important; overflow:visible!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_staff_profession { color:#FFFFFF!important; margin-top:3px!important; margin-bottom:8px!important; font-size:13px!important; line-height:19px!important; text-align:center!important } #booknetic_theme_8 .booknetic_card_description>div { width:100%!important; max-width:100%!important; color:#CCCCCC!important; font-size:12px!important; line-height:19px!important; text-align:center!important; overflow:visible!important; white-space:normal!important; word-break:normal!important; overflow-wrap:anywhere!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_service_search_wrapper { width:100%!important; margin-bottom:18px!important; background:transparent!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_service_search_input { width:100%!important; height:42px!important; padding:0 14px!important; background:#050505!important; color:#FFFFFF!important; border:1px solid #333333!important; border-radius:2px!important; outline:none!important; box-shadow:none!important; font-size:13px!important; box-sizing:border-box!important; transition:border-color .2s ease,background-color .2s ease!important } #booknetic_theme_8 .booknetic_service_search_input::placeholder { color:#777777!important; opacity:1!important } #booknetic_theme_8 .booknetic_service_search_input:focus { background:#080808!important; border-color:#FFD700!important; color:#FFFFFF!important } #booknetic_theme_8 .booknetic_category_accordion { width:100%!important; background:transparent!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_service_category { position:relative!important; width:100%!important; padding-top:15px!important; padding-bottom:15px!important; color:#D0D0D0!important; background:#000000!important; border-bottom:1px solid #242424!important; font-size:14px!important; font-weight:500!important; cursor:pointer!important; box-sizing:border-box!important; transition:color .2s ease,border-color .2s ease!important } #booknetic_theme_8 .booknetic_service_category:hover { color:#FFFFFF!important; border-bottom-color:#555555!important } #booknetic_theme_8 .booknetic_category_accordion.active>.booknetic_service_category { color:#FFD700!important; border-bottom-color:#FFD700!important } #booknetic_theme_8 .booknetic_service_category>span { border-color:#888888!important; transition:border-color .2s ease,transform .2s ease!important } #booknetic_theme_8 .booknetic_category_accordion.active>.booknetic_service_category>span { border-color:#FFD700!important } #booknetic_theme_8 .booknetic_service_card { position:relative!important; width:100%!important; margin-top:12px!important; margin-bottom:12px!important; padding:18px!important; background:#050505!important; border:1px solid #292929!important; border-radius:3px!important; box-shadow:none!important; box-sizing:border-box!important; cursor:pointer!important; transition:border-color .2s ease,background-color .2s ease!important } #booknetic_theme_8 .booknetic_service_card:hover { background:#080808!important; border-color:#666666!important } #booknetic_theme_8 .booknetic_service_card.booknetic_service_card_selected { background:#080808!important; border:1px solid #FFD700!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_service_card_header { display:flex!important; align-items:center!important; width:100%!important; gap:14px!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_service_card_image { flex-shrink:0!important } #booknetic_theme_8 .booknetic_card_service_image { display:block!important; width:46px!important; height:46px!important; object-fit:cover!important; border-radius:50%!important } #booknetic_theme_8 .booknetic_service_card_title { flex:1 1 auto!important; min-width:0!important; color:#FFFFFF!important } #booknetic_theme_8 .booknetic_service_title_span { color:#FFD700!important; font-size:14px!important; font-weight:600!important; line-height:20px!important } #booknetic_theme_8 .booknetic_service_card_price { flex:0 0 auto!important; margin-left:auto!important; padding-left:12px!important; color:#FFD700!important; font-size:14px!important; font-weight:600!important; white-space:nowrap!important } #booknetic_theme_8 .booknetic_free_badge { color:#FFD700!important; background:transparent!important } #booknetic_theme_8 .booknetic_service_card_description { margin-top:14px!important; color:#AFAFAF!important; font-size:12px!important; line-height:18px!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_service_card_description_fulltext,#booknetic_theme_8 .booknetic_service_card_description_wrapped { color:#AFAFAF!important; font-size:12px!important; line-height:18px!important } #booknetic_theme_8 .booknetic_view_more_service_notes_button,#booknetic_theme_8 .booknetic_view_less_service_notes_button { margin-top:8px!important; color:#FFD700!important; font-size:11px!important; font-weight:600!important; cursor:pointer!important; text-decoration:none!important } #booknetic_theme_8 .booknetic_view_more_service_notes_button:hover,#booknetic_theme_8 .booknetic_view_less_service_notes_button:hover { color:#FFFFFF!important } #booknetic_theme_8 .booknetic_service_extra_card { position:relative!important; width:100%!important; margin-top:10px!important; margin-bottom:10px!important; padding:0!important; background:#050505!important; border:1px solid #303030!important; border-radius:3px!important; box-shadow:none!important; box-sizing:border-box!important; overflow:hidden!important; cursor:pointer!important; transition:background-color .2s ease,border-color .2s ease!important } #booknetic_theme_8 .booknetic_service_extra_card:hover { background:#080808!important; border-color:#666666!important } #booknetic_theme_8 .booknetic_service_extra_card:active { background:#0A0A0A!important; border-color:#FFD700!important } #booknetic_theme_8 .booknetic_service_extra_card.booknetic_service_extra_card_selected { background:#080808!important; border:1px solid #FFD700!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_service_extra_card_header { position:relative!important; width:100%!important; display:flex!important; align-items:center!important; gap:14px!important; min-height:74px!important; padding:16px!important; background:transparent!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_service_extra_card_image { flex:0 0 52px!important; width:52px!important; height:52px!important; display:flex!important; align-items:center!important; justify-content:center!important; overflow:hidden!important } #booknetic_theme_8 .booknetic_service_extra_card_image img { display:block!important; width:52px!important; height:52px!important; object-fit:cover!important; object-position:center!important; border-radius:2px!important } #booknetic_theme_8 .booknetic_service_extra_card_title_quantity { flex:1 1 auto!important; min-width:0!important } #booknetic_theme_8 .booknetic_service_extra_card_title { display:flex!important; flex-direction:column!important; align-items:flex-start!important; min-width:0!important } #booknetic_theme_8 .booknetic_service_extra_card_title>span:first-child { color:#FFD700!important; font-size:14px!important; font-weight:600!important; line-height:20px!important; white-space:normal!important; word-break:normal!important; overflow-wrap:anywhere!important } #booknetic_theme_8 .booknetic_service_extra_card_title>span:nth-child(2) { display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:30px!important; margin-top:5px!important; padding:2px 7px!important; background:#151515!important; color:#FFD700!important; border:1px solid #444444!important; border-radius:999px!important; font-size:10px!important; font-weight:600!important; line-height:16px!important; white-space:nowrap!important } #booknetic_theme_8 .booknetic_service_extra_card_price { flex:0 0 auto!important; margin-left:auto!important; padding-left:14px!important; color:#FFD700!important; font-size:16px!important; font-weight:500!important; line-height:22px!important; white-space:nowrap!important } #booknetic_theme_8 .booknetic_service_extra_card .booknetic_service_card_description { margin:0!important; padding:0 16px 16px 82px!important; color:#AFAFAF!important; font-size:12px!important; line-height:18px!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_service_extra_quantity { margin-top:8px!important; align-items:center!important; gap:5px!important } #booknetic_theme_8 .booknetic_service_extra_quantity_dec,#booknetic_theme_8 .booknetic_service_extra_quantity_inc { width:28px!important; height:28px!important; display:flex; align-items:center; justify-content:center; background:#111111!important; color:#FFD700!important; border:1px solid #444444!important; border-radius:2px!important; cursor:pointer!important } #booknetic_theme_8 .booknetic_service_extra_quantity_input { width:40px!important; height:28px!important; padding:0 5px!important; background:#000000!important; color:#FFFFFF!important; border:1px solid #444444!important; border-radius:2px!important; box-shadow:none!important; outline:none!important; text-align:center!important } #booknetic_theme_8 .booknetic_service_extra_quantity_dec:hover,#booknetic_theme_8 .booknetic_service_extra_quantity_inc:hover,#booknetic_theme_8 .booknetic_service_extra_quantity_input:focus { border-color:#FFD700!important } #booknetic_theme_8 .booknetic_service_extra_card.booknetic_service_extra_card_selected .booknetic_service_extra_card_title>span:first-child,#booknetic_theme_8 .booknetic_service_extra_card.booknetic_service_extra_card_selected .booknetic_service_extra_card_price { color:#FFD700!important } #booknetic_theme_8 .booknetic_package_card { background:#050505!important; border:1px solid #292929!important; border-radius:3px!important; margin-bottom:10px; cursor:pointer; box-shadow:none!important; transition:border-color .2s ease,background-color .2s ease!important } #booknetic_theme_8 .booknetic_package_card:hover { background:#080808!important; border-color:#666666!important } #booknetic_theme_8 .booknetic_package_card_title>span:first-child { color:#FFD700!important; font-size:14px; font-weight:600; word-break:break-word } #booknetic_theme_8 .booknetic_package_card_service_el>span:last-child { display:flex; width:28px; padding:2px 6px; flex-direction:column; justify-content:center; align-items:center; border-radius:999px; background:#FFD700!important; color:#000000; font-size:12px; font-weight:600; line-height:18px } #booknetic_theme_8 .booknetic_service_card_price,#booknetic_theme_8 .booknetic_service_extra_card_price,#booknetic_theme_8 .booknetic-cart-item-body-cell.amount,#booknetic_theme_8 .booknetic_sum_price { color:#FFD700!important } #booknetic_theme_8 .booknetic_td.booknetic_calendar_days:not(.booknetic_calendar_empty_day)>div { background:#0A0A0A!important; color:#FFFFFF!important; border:1px solid #242424!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_td.booknetic_calendar_days:not(.booknetic_calendar_empty_day):not(.booknetic_calendar_selected_day)>div:hover { background:#111111!important; border-color:#555555!important } #booknetic_theme_8 .booknetic_td.booknetic_calendar_days.booknetic_calendar_selected_day>div { background:#FFD700!important; color:#000000!important; border:1px solid #FFD700!important; box-shadow:none!important; font-weight:600!important } #booknetic_theme_8 .booknetic_td.booknetic_calendar_days.booknetic_calendar_empty_day>div { background:#050505!important; color:#666666!important; border:1px solid #151515!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_calendar_days>div>span>i[a] { background:#FFD700!important } #booknetic_theme_8 .booknetic_calendar_days>div>span>i[b] { background:#555555!important } #booknetic_theme_8 .booknetic_calendar_days.booknetic_calendar_selected_day>div>span>i[a] { background:#000000!important } #booknetic_theme_8 .booknetic_calendar_days.booknetic_calendar_selected_day>div>span>i[b] { background:#777777!important } #booknetic_theme_8 .booknetic_time_element { background:#101010!important; color:#FFFFFF!important; border:1px solid #303030!important; box-shadow:none!important; transition:background-color .2s ease,border-color .2s ease,color .2s ease!important } #booknetic_theme_8 .booknetic_time_element:not(.booknetic_selected_time):not(.bkntc_busy_slots):hover { background:#171717!important; border-color:#666666!important } #booknetic_theme_8 .booknetic_time_element.booknetic_selected_time { background:#FFD700!important; color:#000000!important; border:1px solid #FFD700!important; box-shadow:none!important; font-weight:600!important } #booknetic_theme_8 .booknetic_time_element.booknetic_selected_time>div { color:#000000!important } #booknetic_theme_8 .booknetic_time_element.bkntc_busy_slots { position:relative!important; background:#363636!important; color:#FFFFFF!important; border:1px solid #666666!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_time_element.bkntc_busy_slots:hover { background:#414141!important; border-color:#FFD700!important } #booknetic_theme_8 .bkntc_busy_slot_info { background:#FFD700!important; color:#000000!important; border-color:#FFD700!important; box-shadow:none!important; font-weight:700!important } #booknetic_theme_8 .waiting_list_info { background:#000000; text-align:center } #booknetic_theme_8 .booknetic_appointment_finished { background:#000000; width:100%; height:100%; display:none; justify-content:center; align-items:center; flex-direction:column; padding:30px 0; border-radius:2px; box-shadow:none } #booknetic_theme_8 .booknetic_appointment_finished_title { color:#FFFFFF; font-size:24px; font-weight:500; margin:15px 0 } #booknetic_theme_8 .booknetic_appointment_finished_code { color:#FFD700; font-size:44px; font-weight:300; letter-spacing:10px; margin-bottom:35px } #booknetic_theme_8 .bkntc-information-step-info-container { width:100%!important; margin:18px 0 0!important; padding:16px 18px!important; background:#050505!important; color:#D0D0D0!important; border:1px solid #303030!important; border-left:2px solid #FFD700!important; border-radius:2px!important; box-shadow:none!important; box-sizing:border-box!important; font-size:12px!important; font-weight:400!important; line-height:18px!important } #booknetic_theme_8 .bkntc-information-step-info-container .form-group { margin:0!important; padding:0!important } #booknetic_theme_8 .bkntc-information-step-info-container label { display:flex!important; align-items:center!important; gap:8px!important; margin:0 0 8px!important; color:#FFD700!important; font-size:14px!important; font-weight:600!important; line-height:20px!important } #booknetic_theme_8 .bkntc-information-step-info-container label img { display:block!important; width:15px!important; height:15px!important; flex:0 0 15px!important; filter:none!important } #booknetic_theme_8 .bkntc-information-step-info-container label span { color:#FFD700!important } #booknetic_theme_8 .bkntc-information-step-info-container .form-group>div { color:#D0D0D0!important; font-size:12px!important; font-weight:400!important; line-height:19px!important } #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] { position:relative!important } #booknetic_theme_8 .bkntc_input_identifier_clear { position:absolute!important; top:31px!important; right:10px!important; z-index:20!important; width:20px!important; height:20px!important; margin:0!important; padding:0!important; background:#111111!important; border:1px solid #444444!important; border-radius:2px!important; box-shadow:none!important; opacity:1!important; cursor:pointer!important; box-sizing:border-box!important; object-fit:contain!important; transform:none!important; filter:none!important; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6L14 14M14 6L6 14' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")!important; transition:background-color .2s ease,border-color .2s ease!important } #booknetic_theme_8 .bkntc_input_identifier_clear:hover { background:#000000!important; border-color:#FFD700!important; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6L14 14M14 6L6 14' fill='none' stroke='%23FFD700' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")!important } @keyframes dpBookneticEmailSpin { from { transform:rotate(0deg) } to { transform:rotate(360deg) } } #booknetic_theme_8 .bkntc_input_identifier_loading { position:absolute!important; top:32px!important; right:11px!important; z-index:19!important; width:18px!important; height:18px!important; margin:0!important; padding:0!important; opacity:1!important; background:transparent!important; border:0!important; box-shadow:none!important; object-fit:contain!important; filter:none!important; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23444444' stroke-width='2.4' opacity='.55'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23FFD700' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")!important; animation:dpBookneticEmailSpin .7s linear infinite!important } #booknetic_theme_8 .bkntc_spam_notice { margin-top:7px!important; color:#888888!important; font-size:10px!important; font-weight:400!important; line-height:15px!important } #booknetic_theme_8 .booknetic_warning_message { border-radius:2px!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_portlet { padding:13px 20px; background:#000000; border-radius:2px; box-shadow:none } #booknetic_theme_8 .booknetic_gift_discount>.booknetic_gift_discount_price,#booknetic_theme_8 .booknetic_gift_discount_price { color:#FFD700!important } #booknetic_theme_8 .booknetic_add_coupon,#booknetic_theme_8 .booknetic_add_giftcard { position:relative; flex-grow:1; justify-content:space-between; align-items:center; background:#000000!important; padding:8px; border:1px solid #FFFFFF!important; border-radius:2px; box-sizing:border-box } #booknetic_theme_8 .booknetic_add_coupon { display:flex; margin:0 10px } #booknetic_theme_8 .booknetic_add_giftcard { margin:0!important } #booknetic_theme_8 .booknetic_add_coupon input,#booknetic_theme_8 .booknetic_add_giftcard input { text-align:left; width:70%; height:30px; padding:0 12px!important; background:transparent!important; border:0!important; outline:0!important; color:#FFFFFF!important; font-size:14px } #booknetic_theme_8 .booknetic_add_coupon input::placeholder,#booknetic_theme_8 .booknetic_add_giftcard input::placeholder { color:#AAAAAA!important; opacity:1 } #booknetic_theme_8 .booknetic_btn_success { height:36px; padding:5px 15px!important; background:#FFD700!important; color:#000000!important; border:1px solid #FFD700!important; border-radius:2px!important; outline:none!important; box-shadow:none!important; cursor:pointer; font-size:12px!important; font-weight:600!important; line-height:18px!important; text-decoration:none!important; text-transform:uppercase!important; transition:.2s ease } #booknetic_theme_8 .booknetic_btn_success:hover { background:#000000!important; color:#FFD700!important; border-color:#FFD700!important } #booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_btn_primary { min-width:110px!important; height:40px!important; padding:0 18px!important; background:#FFD700!important; color:#000000!important; border:1px solid #FFD700!important; border-radius:2px!important; box-shadow:none!important; outline:none!important; font-size:12px!important; font-weight:600!important; text-transform:uppercase!important; cursor:pointer!important; transition:background-color .2s ease,color .2s ease,border-color .2s ease!important } #booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_btn_primary:hover { background:#000000!important; color:#FFD700!important; border-color:#FFD700!important } #booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_btn_secondary.booknetic_prev_step { min-width:110px!important; height:40px!important; padding:0 18px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; background:#000000!important; color:#FFFFFF!important; border:1px solid #444444!important; border-radius:2px!important; box-shadow:none!important; outline:none!important; font-size:12px!important; font-weight:600!important; line-height:1!important; text-align:center!important; text-transform:uppercase!important; cursor:pointer!important; transition:background-color .2s ease,color .2s ease,border-color .2s ease!important } #booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_btn_secondary.booknetic_prev_step:hover { background:#000000!important; color:#FFD700!important; border-color:#FFD700!important } #booknetic_theme_8 .booknetic_confirm_sum_price { position:relative; width:100%; height:46px; display:flex; justify-content:space-between; align-items:center; padding:0 20px; background:#000000; color:#FFFFFF; font-size:14px; font-weight:500; line-height:27px } #booknetic_theme_8 .booknetic_appointment_container_header .booknetic_appointment_container_header_cart>div span { position:absolute; right:6px; top:6px; width:15px; height:15px; display:flex; align-items:center; justify-content:center; background:#FFD700; color:#000000; font-size:10px; line-height:12px; text-align:center; border-radius:50% } #booknetic_theme_8 .booknetic_header { color:#FFD700; text-align:center; font-size:32px; font-weight:600; line-height:48px } #booknetic_theme_8 .booknetic_check_your_email { color:#FFFFFF!important; font-size:14px!important; font-weight:500!important; text-align:center!important; margin:40px 0 } .booknetic_signup,.booknetic_signup * { box-sizing:border-box; font-family:"Poppins",sans-serif!important } .booknetic_signup { display:block; width:460px!important; height:auto; padding:35px 0; background:#000000; border-radius:2px!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_service_card_selected,#booknetic_theme_8 .booknetic_card_selected,#booknetic_theme_8 .booknetic_service_extra_card_selected,#booknetic_theme_8 .booknetic-cart-item.active { border-color:#FFD700!important } #booknetic_theme_8 .booknetic_payment_methods { display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px } #booknetic_theme_8 .booknetic_payment_method { width:127px; height:80px; display:flex; flex-direction:column; justify-content:center; align-items:center; margin-right:0; margin-bottom:10px; background:#000000; color:#FFD700; border:1px solid #FFD700; border-radius:4px; box-shadow:none; cursor:pointer; text-align:center; font-size:14px; font-weight:400; line-height:1.25; transition:background-color .2s ease,border-color .2s ease,color .2s ease } #booknetic_theme_8 .booknetic_payment_method img { display:block; max-width:31px; max-height:26px; margin-bottom:7px } #booknetic_theme_8 .booknetic_payment_method span { color:#FFD700!important; font-size:13px; line-height:1.25; text-align:center } #booknetic_theme_8 .booknetic_payment_method:hover { background:#0A0A0A; border-color:#FFD700 } #booknetic_theme_8 .booknetic_payment_method.booknetic_payment_method_selected { background:#111111!important; color:#FFD700!important; border:2px solid #FFD700!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_payment_method.booknetic_payment_method_selected span { color:#FFD700!important } #booknetic_theme_8 .booknetic_payment_method_selected { border-color:#FFD700!important } #booknetic_theme_8 .booknetic_hide_on_local[style*="display:none"],#booknetic_theme_8 .booknetic_hide_on_local[style*="display:none"] { display:none!important } #booknetic_theme_8 .booknetic_payment_methods_footer { position:relative!important; width:100%!important; height:auto!important; min-height:0!important; background:#000000!important; color:#FFFFFF!important; overflow:visible!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_deposit_price { width:100%!important; min-height:44px!important; justify-content:space-between!important; align-items:center!important; padding:10px 12px!important; background:#000000!important; color:#FFFFFF!important; border:0!important; font-size:14px!important; font-weight:500!important; line-height:24px!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_deposit_amount_txt { color:#FFD700!important; font-weight:500!important } #booknetic_theme_8 .booknetic_deposit_radios { width:100%!important; min-height:48px!important; height:auto!important; align-items:center!important; flex-wrap:wrap!important; gap:18px!important; margin:0!important; padding:8px 12px 12px!important; background:#000000!important; color:#FFFFFF!important; overflow:visible!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_deposit_radios>div { display:flex!important; align-items:center!important; min-height:28px!important; margin:0!important; overflow:visible!important } #booknetic_theme_8 .booknetic_deposit_radios label { color:#FFFFFF!important; font-size:14px!important; line-height:20px!important; margin:0 0 0 8px!important; cursor:pointer } #booknetic_theme_8 .booknetic_deposit_radios input[type="radio"] { appearance:none!important; -webkit-appearance:none!important; width:20px!important; height:20px!important; min-width:20px!important; min-height:20px!important; margin:0!important; padding:0!important; background:#000000!important; border:2px solid #FFFFFF!important; border-radius:50%!important; outline:none!important; box-shadow:none!important; cursor:pointer; flex:0 0 20px!important } #booknetic_theme_8 .booknetic_deposit_radios input[type="radio"]:checked { background:#FFD700!important; border:5px solid #FFD700!important; box-shadow:inset 0 0 0 4px #000000!important } #booknetic_theme_8 .booknetic_deposit_radios input[type="radio"]:checked + label { color:#FFD700!important } #booknetic_theme_8 .booknetic_giftcard_ok_btn { background:#FFD700!important; color:#000000!important; border:1px solid #FFD700!important; border-radius:2px!important; box-shadow:none!important } #booknetic_theme_8 .booknetic-customer-point-badge { color:#FFD700; font-size:10px; font-weight:400; line-height:13px; border-radius:30px; background:#000000; padding:4px 6px } #booknetic-tab-email-preferences .table-gray-2 thead th { background:#000000; color:#FFD700; padding:10px 20px; font-size:12px; font-weight:600 } #booknetic-tab-email-preferences .table-gray-2 tbody td { position:relative; padding:15px 20px; color:#FFFFFF; font-size:14px } #booknetic-tab-email-preferences .fs_onoffswitch-checkbox:checked + .fs_onoffswitch-label { background:#FFD700 } #booknetic-tab-email-preferences .table-gray-2 tbody tr:not(:last-child) td::after { content:""; position:absolute; bottom:0; left:0; width:100%; border-bottom:1px solid #FFD700 } #booknetic-tab-email-preferences .booknetic_ep_cp_toggle_all { display:block; margin-top:8px; color:#FFFFFF; text-align:right; font-size:13px; text-decoration:none; cursor:pointer } #booknetic_theme_8 .bkntc_package-confirmation_container { display:flex; flex-direction:column; height:100%; padding-top:42px; background:#000000 } #booknetic_theme_8 .bkntc_package-confirmation_header { padding:16px; border:1px solid #FFD700; border-radius:4px } #booknetic_theme_8 .bkntc_package-confirmation_header p { color:#FFFFFF; font-size:14px; font-weight:500; line-height:20px } #booknetic_theme_8 .bkntc_package_summary,#booknetic_theme_8 .bkntc_package_warning,#booknetic_theme_8 .bkntc_package_appointment.booked,#booknetic_theme_8 .bkntc_package_appointment.empty { border-color:#FFD700!important } @media only screen and (max-width:600px) { #booknetic_theme_8 .booknetic_appointment_container:has( [data-step-id="staff"][style*="display:block"] ) { height:auto!important; min-height:0!important; overflow:visible!important } #booknetic_theme_8 .booknetic_appointment_container_body:has( [data-step-id="staff"][style*="display:block"] ) { height:auto!important; min-height:0!important; overflow:visible!important } #booknetic_theme_8 [data-step-id="staff"][style*="display:block"] { height:auto!important; min-height:0!important; overflow:visible!important; padding-bottom:18px!important } #booknetic_theme_8 .booknetic_card_container { width:100%!important; height:auto!important; min-height:0!important; display:flex!important; flex-direction:column!important; flex-wrap:nowrap!important; gap:12px!important; padding:0!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_card { width:100%!important; min-width:0!important; max-width:100%!important; min-height:142px!important; height:auto!important; margin:0!important; padding:18px 24px!important; display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; gap:22px!important; background:#050505!important; border:1px solid #252525!important; border-radius:3px!important; box-shadow:none!important; box-sizing:border-box!important; overflow:visible!important } #booknetic_theme_8 .booknetic_card_image { width:74px!important; height:74px!important; min-width:74px!important; margin:0!important; flex:0 0 74px!important } #booknetic_theme_8 .booknetic_card_title { flex:1 1 auto!important; width:auto!important; min-width:0!important; text-align:center!important } #booknetic_theme_8 .booknetic_service_search_wrapper { margin-bottom:14px!important } #booknetic_theme_8 .booknetic_service_search_input { height:44px!important; font-size:14px!important } #booknetic_theme_8 .booknetic_service_category { padding-top:15px!important; padding-bottom:15px!important; font-size:14px!important } #booknetic_theme_8 .booknetic_service_card { width:100%!important; margin-top:10px!important; margin-bottom:10px!important; padding:16px!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_service_card_header { position:relative!important; align-items:flex-start!important; gap:12px!important } #booknetic_theme_8 .booknetic_card_service_image { width:44px!important; height:44px!important } #booknetic_theme_8 .booknetic_service_card_title { padding-right:55px!important } #booknetic_theme_8 .booknetic_service_title_span { font-size:14px!important; line-height:19px!important } #booknetic_theme_8 .booknetic_service_card_price { position:absolute!important; top:0!important; right:0!important; margin:0!important; padding:0!important; font-size:13px!important } #booknetic_theme_8 .booknetic_service_card_description { margin-top:12px!important; font-size:12px!important; line-height:18px!important } #booknetic_theme_8 .bkntc-information-step-info-container { margin-top:14px!important; padding:14px!important } #booknetic_theme_8 .bkntc-information-step-info-container label { font-size:13px!important; line-height:19px!important } #booknetic_theme_8 .bkntc-information-step-info-container .form-group>div { font-size:11px!important; line-height:18px!important } #booknetic_theme_8 .bkntc_input_identifier_clear { top:31px!important; right:9px!important; width:20px!important; height:20px!important; padding:0!important } #booknetic_theme_8 .bkntc_input_identifier_loading { top:32px!important; right:10px!important; width:18px!important; height:18px!important } #booknetic_theme_8 .booknetic_service_extra_card { width:100%!important; margin-top:10px!important; margin-bottom:10px!important } #booknetic_theme_8 .booknetic_service_extra_card_header { align-items:flex-start!important; gap:12px!important; min-height:72px!important; padding:14px!important } #booknetic_theme_8 .booknetic_service_extra_card_image { flex:0 0 46px!important; width:46px!important; height:46px!important } #booknetic_theme_8 .booknetic_service_extra_card_image img { width:46px!important; height:46px!important } #booknetic_theme_8 .booknetic_service_extra_card_title>span:first-child { font-size:13px!important; line-height:18px!important } #booknetic_theme_8 .booknetic_service_extra_card_title>span:nth-child(2) { margin-top:4px!important; font-size:10px!important } #booknetic_theme_8 .booknetic_service_extra_card_price { margin-left:auto!important; padding-left:8px!important; font-size:14px!important; line-height:20px!important } #booknetic_theme_8 .booknetic_service_extra_card .booknetic_service_card_description { padding:0 14px 14px 72px!important; font-size:11px!important; line-height:17px!important } #booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_btn_primary { min-width:120px!important; height:40px!important } #booknetic_theme_8 .booknetic_td.booknetic_calendar_days>div { box-sizing:border-box!important } #booknetic_theme_8 .booknetic_time_element { box-sizing:border-box!important } #booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_btn_secondary.booknetic_prev_step { min-width:100px!important; height:40px!important } #booknetic_theme_8 .booknetic_confirm_step_body { height:auto!important; min-height:0!important; overflow:visible!important } #booknetic_theme_8 .booknetic_confirm_sum_body { position:relative!important; height:auto!important; min-height:0!important; overflow:visible!important } #booknetic_theme_8 .booknetic_confirm_sum_body>.booknetic_portlet { position:relative!important; height:auto!important; min-height:0!important; overflow:visible!important } #booknetic_theme_8 .booknetic_panel_footer { position:relative!important; width:100%!important; height:auto!important; min-height:56px!important; overflow:visible!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_add_coupon { position:relative!important; width:100%!important; max-width:100%!important; height:auto!important; min-height:54px!important; margin:0!important; padding:8px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; overflow:visible!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_add_coupon input.booknetic_coupon { flex:1 1 auto!important; width:auto!important; min-width:0!important; height:36px!important } #booknetic_theme_8 .booknetic_confirm_deposit_body { position:relative!important; width:100%!important; height:auto!important; min-height:0!important; overflow:visible!important } #booknetic_theme_8 .booknetic_payment_methods_container { position:relative!important; width:100%!important; height:auto!important; min-height:0!important; overflow:visible!important } #booknetic_theme_8 .booknetic_payment_methods { position:relative!important; width:100%!important; height:auto!important; display:flex!important; flex-wrap:wrap!important; justify-content:center!important; align-items:flex-start!important; gap:12px!important; clear:both!important; overflow:visible!important } #booknetic_theme_8 .booknetic_payment_method { position:relative!important; width:120px; height:82px; margin:0!important; float:none!important; font-size:13px } #booknetic_theme_8 .booknetic_payment_methods_footer { position:relative!important; width:100%!important; height:auto!important; min-height:0!important; clear:both!important; background:#000000!important; overflow:visible!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_deposit_price { position:relative!important; width:100%!important; height:auto!important; min-height:48px!important; padding:10px 12px!important; background:#000000!important; color:#FFFFFF!important; overflow:visible!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_deposit_radios { position:relative!important; width:100%!important; height:auto!important; min-height:52px!important; padding:8px 12px 14px!important; margin:0!important; background:#000000!important; align-items:center!important; flex-wrap:wrap!important; gap:16px!important; overflow:visible!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_deposit_radios>div { min-height:28px!important; display:flex!important; align-items:center!important; margin:0!important; overflow:visible!important } #booknetic_theme_8 .booknetic_add_giftcard { position:relative!important; width:100%!important; max-width:100%!important; height:auto!important; min-height:54px!important; margin:0!important; padding:8px!important; overflow:visible!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_add_giftcard input { flex:1 1 auto!important; width:auto!important; min-width:0!important; height:36px!important } } #booknetic_theme_8 .booknetic-appointment-container-cart-btn { position:relative!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:34px!important; height:34px!important; background:#0A0A0A!important; border:1px solid #3A3A3A!important; border-radius:50%!important; box-shadow:none!important } #booknetic_theme_8 .booknetic-appointment-container-cart-btn img { width:17px!important; height:17px!important } #booknetic_theme_8 .booknetic-appointment-container-cart-btn span { position:absolute!important; top:-6px!important; right:-5px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:18px!important; height:18px!important; padding:0 4px!important; background:#FFD700!important; color:#000000!important; border:2px solid #000000!important; border-radius:999px!important; font-size:10px!important; font-weight:700!important; line-height:1!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic-cart-item { position:relative!important; min-width:0!important; padding:14px!important; background:#080808!important; color:#FFFFFF!important; border:1px solid #3B3B3B!important; border-radius:6px!important; box-shadow:none!important; transition:border-color .2s ease,background-color .2s ease!important } #booknetic_theme_8 .booknetic-cart-item:hover { background:#0B0B0B!important; border-color:#5A5A5A!important } #booknetic_theme_8 .booknetic-cart-item.active { border-color:#FFD700!important; box-shadow:0 0 0 1px rgba(255,215,0,.08)!important } #booknetic_theme_8 .booknetic-cart-item-header { position:relative!important; display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap:12px!important; margin:0 0 10px!important; padding:0!important } #booknetic_theme_8 .booknetic-cart-item-header>span { display:block!important; padding-right:30px!important; color:#FFFFFF!important; font-size:15px!important; font-weight:600!important; line-height:21px!important } #booknetic_theme_8 .booknetic-cart-item-more { position:absolute!important; top:-2px!important; right:-2px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:24px!important; height:24px!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; border-radius:3px!important; cursor:pointer!important } #booknetic_theme_8 .booknetic-cart-item-more:hover { background:#151515!important } #booknetic_theme_8 .booknetic-cart-item-more img { width:16px!important; height:16px!important; filter:brightness(0) saturate(100%) invert(84%) sepia(100%) saturate(1568%) hue-rotate(359deg) brightness(104%) contrast(104%)!important } #booknetic_theme_8 .booknetic-cart-item-btns { background:#0D0D0D!important; border:1px solid #3A3A3A!important; border-radius:5px!important; box-shadow:0 8px 22px rgba(0,0,0,.35)!important } #booknetic_theme_8 .booknetic-cart-item-remove { display:inline-flex!important; align-items:center!important; gap:7px!important; min-height:34px!important; padding:7px 10px!important; background:transparent!important; color:#FF5A62!important; border:0!important; border-radius:4px!important; font-size:11px!important; font-weight:600!important; cursor:pointer!important } #booknetic_theme_8 .booknetic-cart-item-remove:hover { background:#171717!important } #booknetic_theme_8 .booknetic-cart-item-remove img { width:14px!important; height:14px!important; filter:brightness(0) saturate(100%) invert(46%) sepia(92%) saturate(3037%) hue-rotate(326deg) brightness(105%) contrast(103%)!important } #booknetic_theme_8 .booknetic-cart-item-body { color:#D0D0D0!important } #booknetic_theme_8 .booknetic-cart-item-body-row { display:flex!important; align-items:center!important; gap:8px!important; margin:4px 0!important } #booknetic_theme_8 .booknetic-cart-item-body-cell { color:#CFCFCF!important; font-size:11px!important; font-weight:400!important; line-height:16px!important } #booknetic_theme_8 .booknetic-cart-item-body-cell:first-child { color:#8E8E8E!important } #booknetic_theme_8 .booknetic-cart-item-body-cell.amount { color:#FFD700!important; font-weight:600!important } #booknetic_theme_8 .booknetic-cart-item-info { display:inline-flex!important; align-items:center!important; justify-content:center!important; width:18px!important; height:18px!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; cursor:pointer!important } #booknetic_theme_8 .booknetic-cart-item-info img { width:13px!important; height:13px!important; filter:none!important } #booknetic_theme_8 .booknetic-cart-item-info-details { margin-top:8px!important; padding:10px!important; background:#101010!important; border:1px solid #333333!important; border-radius:5px!important; box-shadow:none!important } #booknetic_theme_8 .booknetic-cart-item-info-details-row { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; padding:0!important } #booknetic_theme_8 .booknetic-cart-item-info-details-cell { color:#D6D6D6!important; font-size:11px!important; line-height:16px!important } #booknetic_theme_8 .booknetic-cart-item-info-details-cell:first-child { color:#FFD700!important; font-weight:600!important } #booknetic_theme_8 .booknetic-cart-item-info-details-cell:last-child { color:#FFD700!important; font-weight:600!important } #booknetic_theme_8 .booknetic-cart-item-info-details-arrow { width:0!important; height:0!important; background:transparent!important; border-left:5px solid transparent!important; border-right:5px solid transparent!important; border-bottom:0!important; border-top:6px solid #FFD700!important } #booknetic_theme_8 .bkntc_again_booking { display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; min-height:38px!important; padding:8px 14px!important; background:#0A0A0A!important; color:#FFD700!important; border:1px solid #FFD700!important; border-radius:5px!important; box-shadow:none!important; font-size:11px!important; font-weight:600!important; line-height:16px!important; cursor:pointer!important; transition:background-color .2s ease,color .2s ease!important } #booknetic_theme_8 .bkntc_again_booking:hover { background:#151515!important; color:#FFD700!important; border-color:#FFD700!important } #booknetic_theme_8 .bkntc_again_booking img { width:15px!important; height:15px!important; filter:none!important } #booknetic_theme_8 .bkntc_again_booking:hover img { filter:none!important } #booknetic_theme_8 .bkntc_again_booking span { color:inherit!important } #booknetic_theme_8 .booknetic-cart-item-error { margin-top:10px!important } #booknetic_theme_8 .booknetic-cart-item-error-header { background:#151515!important; border:1px solid #4A2A2A!important; border-radius:4px!important; color:#FF6B73!important } #booknetic_theme_8 .booknetic-cart-item-error-header img { filter:brightness(0) saturate(100%) invert(55%) sepia(81%) saturate(1869%) hue-rotate(321deg) brightness(104%) contrast(103%)!important } @media only screen and (max-width:600px) { #booknetic_theme_8 .booknetic-cart-item { width:100%!important; padding:13px!important } #booknetic_theme_8 .booknetic-cart-item-header>span { font-size:14px!important; line-height:20px!important } #booknetic_theme_8 .booknetic-cart-item-body-row { align-items:flex-start!important } #booknetic_theme_8 .bkntc_again_booking { width:100%!important; min-height:40px!important } } #booknetic_theme_8 .booknetic_appointment_steps { display:none!important } #booknetic_theme_8 .booknetic_appointment_container { width:100%!important } #booknetic_theme_8 #booknetic-redeem-points-container { padding:12px 14px!important; background:#0B0B0B!important; border:1px solid #303030!important; border-radius:5px!important; box-shadow:none!important; color:#FFFFFF!important } #booknetic_theme_8 #booknetic-redeem-points-container>img { width:20px!important; height:20px!important; filter:brightness(0) saturate(100%) invert(84%) sepia(100%) saturate(1568%) hue-rotate(359deg) brightness(104%) contrast(104%)!important } #booknetic_theme_8 #booknetic-redeem-points-container .points-details { color:#FFFFFF!important } #booknetic_theme_8 #booknetic-redeem-points-container .total-points { margin:0!important; color:#FFFFFF!important; font-weight:600!important } #booknetic_theme_8 #booknetic-redeem-points-container .point-value { margin:0!important; color:#8F8F8F!important; font-size:11px!important } #booknetic_theme_8 #booknetic-redeem-points-container .booknetic-use-coins-btn { background:#0A0A0A!important; color:#FFD700!important; border:1px solid #FFD700!important; border-radius:4px!important; box-shadow:none!important } #booknetic_theme_8 #booknetic-redeem-points-container .booknetic-use-coins-btn:hover { background:#FFD700!important; color:#000000!important } #booknetic_theme_8 #booknetic-redeem-points-container .booknetic-use-points { background:#0B0B0B!important; border:1px solid #303030!important; border-radius:4px!important; box-shadow:none!important } #booknetic_theme_8 #booknetic-redeem-points-container .booknetic-use-points label { color:#CFCFCF!important } #booknetic_theme_8 #bookneticUsePoints { background:#050505!important; color:#FFFFFF!important; border:1px solid #3A3A3A!important; border-radius:4px!important; box-shadow:none!important } #booknetic_theme_8 #bookneticUsePoints:focus { border-color:#FFD700!important; outline:none!important } #booknetic_theme_8 #booknetic-redeem-points-container .booknetic-use-points-button { background:#FFD700!important; color:#000000!important; border:1px solid #FFD700!important; border-radius:4px!important; font-weight:600!important } #booknetic_theme_8 .booknetic_confirm_step_body { background:#000000!important; color:#FFFFFF!important } #booknetic_theme_8 .booknetic_confirm_sum_body { color:#FFFFFF!important } #booknetic_theme_8 .booknetic_confirm_sum_body .booknetic_confirm_sum_price,#booknetic_theme_8 .booknetic_confirm_deposit_body .booknetic_confirm_sum_price { color:#FFD700!important; font-weight:600!important } #booknetic_theme_8 .booknetic_payment_methods_container { background:transparent!important; border:0!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_payment_methods { gap:10px!important } #booknetic_theme_8 .booknetic_payment_method { background:#0A0A0A!important; color:#FFFFFF!important; border:1px solid #3A3A3A!important; border-radius:5px!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_payment_method:hover { background:#0D0D0D!important; border-color:#666666!important } #booknetic_theme_8 .booknetic_payment_method.booknetic_payment_method_selected { background:#0A0A0A!important; border-color:#FFD700!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_payment_method span { color:#FFFFFF!important; font-weight:500!important } #booknetic_theme_8 .booknetic_payment_method.booknetic_payment_method_selected span { color:#FFD700!important } #booknetic_theme_8 .booknetic_payment_method img { } #booknetic_theme_8 .booknetic_payment_method.booknetic_payment_method_selected img { filter:brightness(0) saturate(100%) invert(84%) sepia(100%) saturate(1568%) hue-rotate(359deg) brightness(104%) contrast(104%)!important } #booknetic_theme_8 .booknetic_payment_methods_footer { background:transparent!important; color:#FFFFFF!important } #booknetic_theme_8 .booknetic_deposit_price { color:#FFFFFF!important } #booknetic_theme_8 .booknetic_deposit_amount_txt { color:#FFD700!important; font-weight:600!important } #booknetic_theme_8 .booknetic_deposit_radios label { color:#D5D5D5!important } #booknetic_theme_8 .booknetic_add_giftcard input,#booknetic_theme_8 #booknetic_giftcard { background:#050505!important; color:#FFFFFF!important; border:1px solid #3A3A3A!important; border-radius:4px 0 0 4px!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_add_giftcard input:focus,#booknetic_theme_8 #booknetic_giftcard:focus { border-color:#FFD700!important; outline:none!important } #booknetic_theme_8 .booknetic_giftcard_ok_btn { background:#FFD700!important; color:#000000!important; border:1px solid #FFD700!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_add_coupon { background:transparent!important } #booknetic_theme_8 .booknetic_add_coupon #booknetic_coupon { background:#050505!important; color:#FFFFFF!important; border:1px solid #3A3A3A!important; border-radius:4px 0 0 4px!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_add_coupon #booknetic_coupon::placeholder { color:#7C7C7C!important; opacity:1!important } #booknetic_theme_8 .booknetic_add_coupon #booknetic_coupon:focus { border-color:#FFD700!important; outline:none!important } #booknetic_theme_8 .booknetic_coupon_ok_btn { background:#FFD700!important; color:#000000!important; border:1px solid #FFD700!important; box-shadow:none!important; font-weight:600!important } #booknetic_theme_8 .booknetic_coupon_cancel_btn { background:#111111!important; color:#FFFFFF!important; border:1px solid #444444!important; box-shadow:none!important } #booknetic_theme_8 .booknetic_confirm_booking_btn { background:#FFD700!important; color:#000000!important; border:1px solid #FFD700!important; box-shadow:none!important; font-weight:600!important } @media only screen and (max-width:600px) { #booknetic_theme_8 #booknetic-redeem-points-container { padding:11px!important } #booknetic_theme_8 .booknetic_payment_methods { gap:8px!important } #booknetic_theme_8 .booknetic_payment_method { min-height:58px!important } } #booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_btn_primary,#booknetic_theme_8 .booknetic_btn_success,#booknetic_theme_8 #booknetic-redeem-points-container .booknetic-use-points-button { background:linear-gradient(135deg,#FFD700 0%,#E6B800 100%)!important; color:#000!important; border:1px solid #FFD700!important; transition:background .2s ease,color .2s ease,border-color .2s ease!important } #booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_btn_primary:hover,#booknetic_theme_8 .booknetic_btn_success:hover,#booknetic_theme_8 #booknetic-redeem-points-container .booknetic-use-points-button:hover { background:#000!important; color:#FFD700!important; border-color:#FFD700!important } #booknetic_theme_8 .booknetic_appointment_container_header { min-height:64px!important; height:auto!important; display:flex!important; align-items:center!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_appointment_container_header_text { position:relative!important; display:flex!important; flex-direction:column!important; justify-content:center!important; min-height:44px!important; padding-left:48px!important; color:#FFFFFF!important; font-size:15px!important; font-weight:600!important; line-height:19px!important; text-transform:uppercase!important; letter-spacing:.3px!important; box-sizing:border-box!important } #booknetic_theme_8 .booknetic_appointment_container_header_text:before { position:absolute!important; left:0!important; top:50%!important; transform:translateY(-50%)!important; width:32px!important; height:32px!important; display:flex!important; align-items:center!important; justify-content:center!important; background:linear-gradient(135deg,#FFE66A 0%,#FFD700 48%,#D9A900 100%)!important; color:#000000!important; border:1px solid #FFD700!important; border-radius:50%!important; font-size:14px!important; font-weight:700!important; line-height:32px!important; letter-spacing:0!important; text-align:center!important } #booknetic_theme_8 .booknetic_appointment_container_header_text:after { display:block!important; margin-top:2px!important; color:#9A9A9A!important; font-size:11px!important; font-weight:400!important; line-height:15px!important; letter-spacing:.2px!important; text-transform:none!important } @media(max-width:767px) { #booknetic_theme_8 .booknetic_appointment_container_header { min-height:60px!important } #booknetic_theme_8 .booknetic_appointment_container_header_text { min-height:40px!important; padding-left:42px!important; font-size:14px!important; line-height:18px!important } #booknetic_theme_8 .booknetic_appointment_container_header_text:before { width:29px!important; height:29px!important; font-size:13px!important; line-height:29px!important } #booknetic_theme_8 .booknetic_appointment_container_header_text:after { font-size:10px!important; line-height:14px!important } } #booknetic_theme_8 .booknetic_appointment_container_footer { height:auto!important; min-height:60px!important; padding:10px 20px!important; align-items:center!important; overflow:visible!important; box-sizing:border-box!important; flex-shrink:0!important } #booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_btn_primary,#booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_btn_secondary.booknetic_prev_step { box-sizing:border-box!important; vertical-align:middle!important; margin-top:0!important; margin-bottom:0!important } #booknetic_theme_8 .booknetic_payment_method img { filter:none!important; opacity:.55!important; transition:opacity .2s ease!important } #booknetic_theme_8 .booknetic_payment_method.booknetic_payment_method_selected img { filter:none!important; opacity:1!important } #booknetic_theme_8 #booknetic-redeem-points-container>img { filter:none!important; opacity:1!important; width:20px!important; height:20px!important; object-fit:contain!important } #booknetic_theme_8 .booknetic_appointment_container_header { min-height:64px!important } #booknetic_theme_8 .booknetic_appointment_container_header_text { position:relative!important; display:flex!important; flex-direction:column!important; justify-content:center!important; min-height:44px!important; padding-left:48px!important; box-sizing:border-box!important; line-height:1.15!important } #booknetic_theme_8 .booknetic_appointment_container_header_text:before { position:absolute!important; left:0!important; top:50%!important; transform:translateY(-50%)!important; width:32px!important; height:32px!important; border-radius:50%!important; display:flex!important; align-items:center!important; justify-content:center!important; background:linear-gradient(135deg,#FFD700 0%,#E6B800 100%)!important; color:#000!important; font-size:13px!important; font-weight:700!important; line-height:32px!important } #booknetic_theme_8 .booknetic_appointment_container_header_text:after { display:block!important; margin-top:5px!important; color:#8F8F8F!important; font-size:11px!important; font-weight:400!important; letter-spacing:.2px!important; line-height:1.25!important; text-transform:none!important } @media(max-width:767px) { #booknetic_theme_8 .booknetic_appointment_container_header { min-height:60px!important } #booknetic_theme_8 .booknetic_appointment_container_header_text { min-height:40px!important; padding-left:42px!important } #booknetic_theme_8 .booknetic_appointment_container_header_text:before { width:28px!important; height:28px!important; font-size:12px!important; line-height:28px!important } #booknetic_theme_8 .booknetic_appointment_container_header_text:after { margin-top:4px!important; font-size:10px!important } } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="staff"]) .booknetic_appointment_container_header_text:before { content:"1"!important } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="staff"]) .booknetic_appointment_container_header_text:after { content:"Choose your stylist"!important } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]) .booknetic_appointment_container_header_text:before { content:"2"!important } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]) .booknetic_appointment_container_header_text:after { content:"Choose your service"!important } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="service_extras"]) .booknetic_appointment_container_header_text:before { content:"3"!important } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="service_extras"]) .booknetic_appointment_container_header_text:after { content:"Enhance your service (optional)"!important } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="date_time"]) .booknetic_appointment_container_header_text:before { content:"4"!important } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="date_time"]) .booknetic_appointment_container_header_text:after { content:"Choose your appointment"!important } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="information"]) .booknetic_appointment_container_header_text:before { content:"5"!important } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="information"]) .booknetic_appointment_container_header_text:after { content:"Tell us a little about you"!important } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic_appointment_container_header_text:before { content:"6"!important } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic_appointment_container_header_text:after { content:"Review your appointments"!important } #booknetic_theme_8 .bkntc_again_booking img { filter:none!important; width:16px!important; height:16px!important; object-fit:contain!important; opacity:1!important } #booknetic_theme_8 .bkntc_again_booking { display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:10px!important; min-height:42px!important; padding:8px 16px!important; background:#050505!important; color:#FFD700!important; border:1px solid #FFD700!important; border-radius:4px!important; box-shadow:none!important; font-size:11px!important; font-weight:700!important; line-height:16px!important; letter-spacing:.1px!important; cursor:pointer!important; transition:background-color .2s ease,border-color .2s ease!important } #booknetic_theme_8 .bkntc_again_booking:hover { background:#111111!important; color:#FFD700!important; border-color:#FFD700!important } #booknetic_theme_8 .bkntc_again_booking img { display:block!important; width:26px!important; height:26px!important; padding:5px!important; background:#000000!important; border:1px solid #FFD700!important; border-radius:50%!important; box-sizing:border-box!important; filter:none!important; opacity:1!important; object-fit:contain!important } #booknetic_theme_8 .bkntc_again_booking:hover img { background:#090909!important; filter:none!important } #booknetic_theme_8 .bkntc_again_booking span { color:#FFD700!important; font-weight:700!important; white-space:nowrap!important } @media(max-width:600px) { #booknetic_theme_8 .bkntc_again_booking { width:100%!important; min-height:44px!important; padding:8px 12px!important } #booknetic_theme_8 .bkntc_again_booking span { white-space:normal!important; text-align:center!important } } @media(max-width:767px) { #booknetic_theme_8,#booknetic_theme_8 .booknetic_appointment_container,#booknetic_theme_8 .booknetic_appointment_container_body { max-width:100%!important; width:100%!important; box-sizing:border-box!important; overflow-x:hidden!important; } #booknetic_theme_8 .bkntc-information-step-info-container { width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; box-sizing:border-box!important; } #booknetic_theme_8 .bkntc-information-step-info-container>.form-group { width:100%!important; max-width:100%!important; min-width:0!important; margin-left:0!important; margin-right:0!important; box-sizing:border-box!important; } #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] { width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] input { width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } } /* ============================================================ BOOKING COMPLETE / SUCCESS SCREEN ============================================================ */ #booknetic_theme_8 .booknetic_appointment_finished { background: #000000 !important; color: #FFFFFF !important; } #booknetic_theme_8 .booknetic_appointment_finished_title { color: #FFFFFF !important; font-weight: 700 !important; } #booknetic_theme_8 .booknetic_appointment_finished_subtitle { color: #7F858C !important; } #booknetic_theme_8 .booknetic_appointment_finished_code { color: #FFD700 !important; letter-spacing: 8px !important; } #booknetic_theme_8 .booknetic_appointment_finished_actions { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; } #booknetic_theme_8 .booknetic_appointment_finished_actions .booknetic_btn_secondary { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 46px !important; padding: 10px 16px !important; box-sizing: border-box !important; background: #050505 !important; border: 1px solid #333333 !important; border-radius: 3px !important; color: #FFFFFF !important; box-shadow: none !important; font-weight: 700 !important; line-height: 1.2 !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease !important; } #booknetic_theme_8 .booknetic_appointment_finished_actions .booknetic_btn_secondary:hover { background: #0D0D0D !important; border-color: #FFD700 !important; color: #FFD700 !important; } #booknetic_theme_8 .booknetic_appointment_finished_actions .booknetic_btn_secondary img { width: 17px !important; height: 17px !important; object-fit: contain !important; filter: none !important; opacity: 1 !important; } #booknetic_theme_8 #booknetic_finish_btn { background: linear-gradient(135deg, #FFD700 0%, #E6B800 100%) !important; border: 1px solid #FFD700 !important; color: #000000 !important; } #booknetic_theme_8 #booknetic_finish_btn:hover { background: #000000 !important; border-color: #FFD700 !important; color: #FFD700 !important; } @media (max-width: 767px) { #booknetic_theme_8 .booknetic_appointment_finished_actions { width: 100% !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } #booknetic_theme_8 .booknetic_appointment_finished_actions .booknetic_btn_secondary { width: 100% !important; max-width: 100% !important; min-height: 48px !important; } } /* ============================================================ CONFIRM DETAILS — DESKTOP REDESIGN Mobile is intentionally left untouched. ============================================================ */ @media (min-width: 768px) { /* Only apply while Confirm Details is the active Booknetic step */ /* Compact two-column checkout area */ /* Loyalty strip — full width when Booknetic exposes it as a grid child */ /* Left column — service / price summary */ /* Right column — payment choices */ /* Any deposit / gift-card controls remain dynamic, but compact */ /* Coupon becomes a compact desktop row */ /* Total price stays directly under coupon rather than falling below a tall body */ /* Footer directly beneath the redesigned checkout */ } /* ========================================================= DAMIAN PHILPOTT — CLEAN CONFIRM DETAILS Desktop only. Keeps mobile unchanged. Removes dotted leader styling and restores clean price rows. ========================================================= */ @media only screen and (min-width: 1001px) { /* Remove Booknetic dotted / leader decoration */ /* Coupon area */ /* Total line */ } /* ========================================================= CART — FORCE AMOUNT PRICE GOLD Fixes Booknetic cart amount text appearing dark/black. ========================================================= */ #booknetic_theme_8 .booknetic-cart-item-body-cell.amount, #booknetic_theme_8 .booknetic-cart-item-body-row:has(.booknetic-cart-item-info) > .booknetic-cart-item-body-cell:nth-child(2) { color: #FFD700 !important; -webkit-text-fill-color: #FFD700 !important; opacity: 1 !important; visibility: visible !important; font-weight: 600 !important; } /* Keep the "Amount:" label subdued while the actual amount stays gold */ #booknetic_theme_8 .booknetic-cart-item-body-row:has(.booknetic-cart-item-info) > .booknetic-cart-item-body-cell:first-child { color: #8E8E8E !important; -webkit-text-fill-color: #8E8E8E !important; opacity: 1 !important; } /* ========================================================= CONFIRM DETAILS — COUPON SUCCESS + WARNING POLISH Desktop only. Mobile remains unchanged. ========================================================= */ @media only screen and (min-width: 1001px) { /* Keep coupon controls on one clean line */ /* Replace the default green success marker with a branded gold tick */ /* Suppress any old success background/icon attached to the input itself */ /* Cancel button stays secondary and restrained */ /* Coupon / validation warning — replace the orange toast */ } /* Mobile: keep Booknetic functionality, but make warning match the brand */ @media only screen and (max-width: 1000px) { #booknetic_theme_8 .booknetic_warning_message { background: #080808 !important; color: #FFD700 !important; border: 1px solid #FFD700 !important; border-radius: 3px !important; box-shadow: none !important; } } /* ========================================================= CONFIRM DETAILS — NATIVE BOOKNETIC COUPON SUCCESS ICON Uses Booknetic's real success.svg (now gold). No replacement character/icon is created. ========================================================= */ @media only screen and (min-width: 1001px) { /* Keep the successful coupon field branded */ /* Restore Booknetic's native success pseudo-element. The actual success.svg file has been changed from green to Damian Philpott gold, so CSS only positions it. */ /* Invalid-code warning: black/gold instead of Booknetic orange */ } /* Mobile: warning only; native coupon icon position remains Booknetic-controlled */ @media only screen and (max-width: 1000px) { #booknetic_theme_8 .booknetic_warning_message { background: #080808 !important; color: #FFD700 !important; border: 1px solid #FFD700 !important; border-radius: 3px !important; box-shadow: none !important; } } /* ========================================================= CONFIRM DETAILS — COUPON ALIGNMENT FINAL Uses the genuine Booknetic success.svg inside the input. Desktop only. Mobile remains unchanged. ========================================================= */ @media only screen and (min-width: 1001px) { /* Successful coupon: show the actual Booknetic gold success.svg inside the field */ /* Hide Booknetic's original pseudo-element so there is only one perfectly aligned tick */ /* Button group */ /* OK stays the primary action */ /* Cancel now matches the site's secondary-button language */ } /* ========================================================= BOOKING SUCCESS — GOLD ARRIVAL GLOW Gentle one-time pulse on the main confirmation tick. ========================================================= */ @keyframes dpSuccessTickArrival { 0% { transform: scale(.88); opacity: 0; filter: drop-shadow(0 0 0 rgba(255,215,0,0)); } 45% { transform: scale(1.06); opacity: 1; filter: drop-shadow(0 0 8px rgba(255,215,0,.38)) drop-shadow(0 0 18px rgba(255,215,0,.20)); } 72% { transform: scale(.985); filter: drop-shadow(0 0 5px rgba(255,215,0,.26)) drop-shadow(0 0 12px rgba(255,215,0,.14)); } 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 5px rgba(255,215,0,.22)) drop-shadow(0 0 12px rgba(255,215,0,.10)); } } #booknetic_theme_8 .booknetic_appointment_finished_icon { display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; } #booknetic_theme_8 .booknetic_appointment_finished_icon img { transform-origin: center center !important; filter: drop-shadow(0 0 5px rgba(255,215,0,.22)) drop-shadow(0 0 12px rgba(255,215,0,.10)) !important; animation: dpSuccessTickArrival 900ms cubic-bezier(.22,.75,.25,1) 1 both !important; will-change: transform, opacity, filter !important; } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { #booknetic_theme_8 .booknetic_appointment_finished_icon img { animation: none !important; transform: none !important; opacity: 1 !important; } } /* ========================================================= BOOKING SUCCESS — STRONGER VISIBLE GOLD HALO Replaces the subtle glow with a clearly visible restrained halo. ========================================================= */ @keyframes dpSuccessTickArrivalStrong { 0% { transform: scale(.82); opacity: 0; filter: drop-shadow(0 0 0 rgba(255,215,0,0)) drop-shadow(0 0 0 rgba(255,215,0,0)); } 40% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 8px rgba(255,215,0,.80)) drop-shadow(0 0 18px rgba(255,215,0,.55)) drop-shadow(0 0 30px rgba(255,215,0,.28)); } 70% { transform: scale(.99); filter: drop-shadow(0 0 7px rgba(255,215,0,.58)) drop-shadow(0 0 16px rgba(255,215,0,.32)) drop-shadow(0 0 26px rgba(255,215,0,.18)); } 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 6px rgba(255,215,0,.48)) drop-shadow(0 0 14px rgba(255,215,0,.24)) drop-shadow(0 0 24px rgba(255,215,0,.12)); } } #booknetic_theme_8 .booknetic_appointment_finished_icon { position: relative !important; overflow: visible !important; z-index: 2 !important; } #booknetic_theme_8 .booknetic_appointment_finished_icon::before { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 70px !important; height: 70px !important; transform: translate(-50%, -50%) !important; border-radius: 50% !important; background: radial-gradient( circle, rgba(255,215,0,.18) 0%, rgba(255,215,0,.08) 42%, rgba(255,215,0,0) 72% ) !important; box-shadow: 0 0 18px rgba(255,215,0,.16), 0 0 34px rgba(255,215,0,.08) !important; pointer-events: none !important; z-index: 0 !important; } #booknetic_theme_8 .booknetic_appointment_finished_icon img { position: relative !important; z-index: 1 !important; transform-origin: center center !important; filter: drop-shadow(0 0 6px rgba(255,215,0,.48)) drop-shadow(0 0 14px rgba(255,215,0,.24)) drop-shadow(0 0 24px rgba(255,215,0,.12)) !important; animation: dpSuccessTickArrivalStrong 1000ms cubic-bezier(.22,.75,.25,1) 1 both !important; will-change: transform, opacity, filter !important; } @media (prefers-reduced-motion: reduce) { #booknetic_theme_8 .booknetic_appointment_finished_icon img { animation: none !important; transform: none !important; opacity: 1 !important; } } /* ========================================================= BOOKING SUCCESS — REFINED MINIMAL VERSION Booking confirmation only. Removes signature, softens panel border, keeps glow and 1+3 actions. ========================================================= */ #booknetic_theme_8 .booknetic_appointment_finished { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 420px !important; margin: 0 !important; padding: 40px 28px 28px !important; display: none; justify-content: center !important; align-items: center !important; flex-direction: column !important; background: radial-gradient(circle at 50% 12%, rgba(255,215,0,.07) 0%, rgba(255,215,0,.022) 28%, rgba(255,215,0,0) 48%), #050505 !important; color: #FFFFFF !important; border: 1px solid #262626 !important; border-radius: 4px !important; box-shadow: none !important; box-sizing: border-box !important; overflow: visible !important; } /* Prevent light Booknetic backgrounds around the success view */ #booknetic_theme_8 .booknetic_appointment_container:has(.booknetic_appointment_finished), #booknetic_theme_8 .booknetic_appointment_container_body:has(.booknetic_appointment_finished) { background: #000000 !important; } /* Existing success tick / glow */ #booknetic_theme_8 .booknetic_appointment_finished_icon { margin: 0 auto 22px !important; overflow: visible !important; } /* Main heading */ #booknetic_theme_8 .booknetic_appointment_finished_title { margin: 0 0 10px !important; color: #FFFFFF !important; font-size: 27px !important; font-weight: 700 !important; line-height: 1.22 !important; text-align: center !important; letter-spacing: -.2px !important; } /* Confirmation label */ #booknetic_theme_8 .booknetic_appointment_finished_subtitle { margin: 0 0 10px !important; color: #858585 !important; font-size: 12px !important; font-weight: 400 !important; line-height: 18px !important; text-align: center !important; } /* Confirmation number — now clean with no signature */ #booknetic_theme_8 .booknetic_appointment_finished_code { display: block !important; width: 100% !important; margin: 0 0 34px !important; padding: 0 0 28px !important; color: #FFD700 !important; font-size: 48px !important; font-weight: 300 !important; line-height: 1 !important; letter-spacing: 10px !important; text-align: center !important; border-bottom: 1px solid #242424 !important; box-sizing: border-box !important; } /* Explicitly remove earlier CSS-generated signature */ #booknetic_theme_8 .booknetic_appointment_finished_code::after { content: none !important; display: none !important; } /* Actions layout */ #booknetic_theme_8 .booknetic_appointment_finished_actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; align-items: stretch !important; box-sizing: border-box !important; } /* Primary action */ #booknetic_theme_8 #booknetic_finish_btn { grid-column: 1 / -1 !important; grid-row: 1 !important; width: min(430px, 100%) !important; min-width: 0 !important; min-height: 52px !important; justify-self: center !important; margin: 0 0 6px !important; padding: 0 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; background: linear-gradient(135deg,#FFD700 0%,#E6B800 100%) !important; color: #000000 !important; border: 1px solid #FFD700 !important; border-radius: 3px !important; box-shadow: none !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .7px !important; text-transform: uppercase !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease !important; } #booknetic_theme_8 #booknetic_finish_btn:hover { background: #000000 !important; color: #FFD700 !important; border-color: #FFD700 !important; } #booknetic_theme_8 #booknetic_finish_btn img { width: 16px !important; height: 16px !important; margin: 0 !important; filter: none !important; opacity: 1 !important; } /* Secondary actions */ #booknetic_theme_8 #booknetic_add_to_google_calendar_btn, #booknetic_theme_8 #booknetic_add_to_icalendar_btn, #booknetic_theme_8 #booknetic_start_new_booking_btn { grid-row: 2 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 58px !important; margin: 0 !important; padding: 10px 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; background: #050505 !important; color: #FFFFFF !important; border: 1px solid #363636 !important; border-radius: 3px !important; box-shadow: none !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: .35px !important; text-align: center !important; text-transform: uppercase !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease !important; } #booknetic_theme_8 #booknetic_add_to_google_calendar_btn:hover, #booknetic_theme_8 #booknetic_add_to_icalendar_btn:hover, #booknetic_theme_8 #booknetic_start_new_booking_btn:hover { background: #0A0A0A !important; color: #FFD700 !important; border-color: #FFD700 !important; } /* Keep secondary icons gold */ #booknetic_theme_8 #booknetic_add_to_google_calendar_btn img, #booknetic_theme_8 #booknetic_add_to_icalendar_btn img, #booknetic_theme_8 #booknetic_start_new_booking_btn img { display: block !important; width: 18px !important; height: 18px !important; margin: 0 !important; object-fit: contain !important; opacity: 1 !important; filter: brightness(0) saturate(100%) invert(84%) sepia(100%) saturate(1568%) hue-rotate(359deg) brightness(104%) contrast(104%) !important; } @media only screen and (max-width: 767px) { #booknetic_theme_8 .booknetic_appointment_finished { min-height: 0 !important; padding: 30px 18px 22px !important; } #booknetic_theme_8 .booknetic_appointment_finished_title { font-size: 22px !important; line-height: 1.3 !important; } #booknetic_theme_8 .booknetic_appointment_finished_subtitle { font-size: 11px !important; } #booknetic_theme_8 .booknetic_appointment_finished_code { margin-bottom: 28px !important; padding-bottom: 24px !important; font-size: 39px !important; letter-spacing: 8px !important; } #booknetic_theme_8 .booknetic_appointment_finished_actions { grid-template-columns: 1fr !important; gap: 10px !important; } #booknetic_theme_8 #booknetic_finish_btn, #booknetic_theme_8 #booknetic_add_to_google_calendar_btn, #booknetic_theme_8 #booknetic_add_to_icalendar_btn, #booknetic_theme_8 #booknetic_start_new_booking_btn { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; max-width: 100% !important; min-height: 50px !important; } } /* ========================================================= BOOKING SUCCESS — SHARP EDITORIAL CORNERS Removes the awkward rounded panel edge. ========================================================= */ #booknetic_theme_8 .booknetic_appointment_finished { border-radius: 0 !important; } /* Keep action controls refined rather than pill-like */ #booknetic_theme_8 #booknetic_finish_btn, #booknetic_theme_8 #booknetic_add_to_google_calendar_btn, #booknetic_theme_8 #booknetic_add_to_icalendar_btn, #booknetic_theme_8 #booknetic_start_new_booking_btn { border-radius: 2px !important; } /* ========================================================= BOOKING SUCCESS — FINAL ICON CONSISTENCY Makes Finish icon match the secondary icon scale and forces Start New Booking plus to true Damian gold. ========================================================= */ /* Finish Booking icon: same visual scale as the other actions */ #booknetic_theme_8 #booknetic_finish_btn img { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; margin: 0 !important; object-fit: contain !important; filter: none !important; opacity: 1 !important; } /* Start New Booking: replace the warm/orange-looking plus with a clean gold plus */ #booknetic_theme_8 #booknetic_start_new_booking_btn img { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; filter: none !important; opacity: 1 !important; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23FFD700' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important; } /* Keep Google/iCal icons at exactly the same visual size */ #booknetic_theme_8 #booknetic_add_to_google_calendar_btn img, #booknetic_theme_8 #booknetic_add_to_icalendar_btn img { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; } /* ========================================================= BOOKING SUCCESS — EMAIL CONFIRMATION NOTICE Adds a discreet email / spam reminder beneath the confirmation number without changing Booknetic HTML. ========================================================= */ #booknetic_theme_8 .booknetic_appointment_finished_code { position: relative !important; margin-bottom: 42px !important; padding-bottom: 66px !important; } /* Reuse the code pseudo-element for a useful confirmation note */ #booknetic_theme_8 .booknetic_appointment_finished_code::after { content: "Please check your email for confirmation. If you don’t see it, please check your junk or spam folder." !important; position: absolute !important; left: 50% !important; bottom: 20px !important; transform: translateX(-50%) !important; display: block !important; width: min(430px, 90%) !important; max-width: 430px !important; color: #929292 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 17px !important; letter-spacing: 0 !important; text-align: center !important; white-space: normal !important; text-shadow: none !important; pointer-events: none !important; } /* Highlight only by hierarchy, not extra gold decoration */ #booknetic_theme_8 .booknetic_appointment_finished_code::before { content: "" !important; position: absolute !important; left: 50% !important; bottom: 0 !important; transform: translateX(-50%) !important; width: 100% !important; height: 1px !important; background: #242424 !important; border: 0 !important; } /* Remove the old direct border so the divider is controlled above */ #booknetic_theme_8 .booknetic_appointment_finished_code { border-bottom: 0 !important; } @media only screen and (max-width: 767px) { #booknetic_theme_8 .booknetic_appointment_finished_code { margin-bottom: 36px !important; padding-bottom: 76px !important; } #booknetic_theme_8 .booknetic_appointment_finished_code::after { bottom: 18px !important; width: 92% !important; font-size: 10px !important; line-height: 16px !important; } } /* ========================================================= BOOKING SUCCESS — FINAL TYPOGRAPHY MATCH Matches the latest concept while keeping the existing Damian Philpott Helvetica / Arial visual language. ========================================================= */ /* Main thank-you heading */ #booknetic_theme_8 .booknetic_appointment_finished_title { font-family: Helvetica, Arial, sans-serif !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: #FFFFFF !important; margin: 0 0 14px !important; } /* "Your confirmation number:" */ #booknetic_theme_8 .booknetic_appointment_finished_subtitle { font-family: Helvetica, Arial, sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 16px !important; letter-spacing: 2.2px !important; text-transform: uppercase !important; color: #8D8D8D !important; margin: 0 0 10px !important; } /* Confirmation number */ #booknetic_theme_8 .booknetic_appointment_finished_code { font-family: Helvetica, Arial, sans-serif !important; font-size: 48px !important; font-weight: 300 !important; line-height: 1 !important; letter-spacing: 12px !important; color: #FFD700 !important; } /* Elegant confirmation-email note */ #booknetic_theme_8 .booknetic_appointment_finished_code::after { font-family: Helvetica, Arial, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 18px !important; letter-spacing: 1.25px !important; text-transform: uppercase !important; color: #A3A3A3 !important; } /* Main Finish Booking action */ #booknetic_theme_8 #booknetic_finish_btn { font-family: Helvetica, Arial, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.3px !important; text-transform: uppercase !important; } /* Secondary success actions */ #booknetic_theme_8 #booknetic_add_to_google_calendar_btn, #booknetic_theme_8 #booknetic_add_to_icalendar_btn, #booknetic_theme_8 #booknetic_start_new_booking_btn { font-family: Helvetica, Arial, sans-serif !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: .8px !important; text-transform: uppercase !important; } /* Mobile typography */ @media only screen and (max-width: 767px) { #booknetic_theme_8 .booknetic_appointment_finished_title { font-size: 19px !important; letter-spacing: 2px !important; } #booknetic_theme_8 .booknetic_appointment_finished_subtitle { font-size: 9px !important; letter-spacing: 1.6px !important; } #booknetic_theme_8 .booknetic_appointment_finished_code { font-size: 39px !important; letter-spacing: 9px !important; } #booknetic_theme_8 .booknetic_appointment_finished_code::after { font-size: 9px !important; line-height: 16px !important; letter-spacing: .9px !important; } } /* ========================================================= DAMIAN PHILPOTT — BOOKNETIC FINAL VISUAL POLISH Based on full flow review. Fixes: - service prices / Free visibility - validation warning styling - information-step inputs - cart remove action colour - loyalty point-value formatting (£0.10) - success email note readability - finish-booking icon scale ========================================================= */ /* ========================================================= 1. SERVICE PRICES — KEEP THEM VISIBLE ========================================================= */ #booknetic_theme_8 .booknetic_service_card_price, #booknetic_theme_8 .booknetic_service_card_price.booknetic_free_badge, #booknetic_theme_8 .booknetic_free_badge { color: #FFD700 !important; opacity: 1 !important; visibility: visible !important; text-shadow: none !important; } /* ========================================================= 2. GLOBAL BOOKNETIC VALIDATION / WARNING MESSAGE Replace default peach/orange styling with black + gold. ========================================================= */ #booknetic_theme_8 .booknetic_warning_message { min-height: 34px !important; padding: 8px 13px !important; background: #080808 !important; color: #FFD700 !important; border: 1px solid #FFD700 !important; border-radius: 2px !important; box-shadow: none !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 16px !important; letter-spacing: .25px !important; text-align: center !important; } #booknetic_theme_8 .booknetic_warning_message::before { color: #FFD700 !important; } /* Any icon inside a warning should inherit the gold treatment */ #booknetic_theme_8 .booknetic_warning_message img, #booknetic_theme_8 .booknetic_warning_message svg { opacity: 1 !important; filter: brightness(0) saturate(100%) invert(84%) sepia(100%) saturate(1568%) hue-rotate(359deg) brightness(104%) contrast(104%) !important; } /* ========================================================= 3. INFORMATION STEP — DARK INPUTS Works for normal bookings AND package bookings ========================================================= */ /* --------------------------------------------------------- TEXT / EMAIL / PHONE INPUTS --------------------------------------------------------- */ #booknetic_theme_8 [data-step-id="information"] .form-group input:not([type="radio"]):not([type="checkbox"]), #booknetic_theme_8 [data-step-id="information"] input.form-control { width: 100% !important; background: #080808 !important; background-color: #080808 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 1px solid #333333 !important; border-radius: 2px !important; box-shadow: none !important; outline: none !important; caret-color: #FFD700 !important; box-sizing: border-box !important; } /* --------------------------------------------------------- PLACEHOLDERS --------------------------------------------------------- */ #booknetic_theme_8 [data-step-id="information"] .form-group input::placeholder, #booknetic_theme_8 [data-step-id="information"] input.form-control::placeholder { color: #767676 !important; -webkit-text-fill-color: #767676 !important; opacity: 1 !important; } /* --------------------------------------------------------- FOCUS --------------------------------------------------------- */ #booknetic_theme_8 [data-step-id="information"] .form-group input:not([type="radio"]):not([type="checkbox"]):focus, #booknetic_theme_8 [data-step-id="information"] input.form-control:focus { background: #050505 !important; background-color: #050505 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border-color: #FFD700 !important; box-shadow: 0 0 0 1px rgba(255,215,0,.08) !important; outline: none !important; } /* --------------------------------------------------------- SAFARI / CHROME AUTOFILL --------------------------------------------------------- */ #booknetic_theme_8 [data-step-id="information"] input:-webkit-autofill, #booknetic_theme_8 [data-step-id="information"] input:-webkit-autofill:hover, #booknetic_theme_8 [data-step-id="information"] input:-webkit-autofill:focus { -webkit-text-fill-color: #FFFFFF !important; -webkit-box-shadow: 0 0 0 1000px #080808 inset !important; box-shadow: 0 0 0 1000px #080808 inset !important; border-color: #333333 !important; caret-color: #FFD700 !important; } /* --------------------------------------------------------- PHONE FIELD / COUNTRY FLAG --------------------------------------------------------- */ #booknetic_theme_8 [data-step-id="information"] .iti { width: 100% !important; background: #080808 !important; color: #FFFFFF !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="information"] .iti__selected-flag, #booknetic_theme_8 [data-step-id="information"] .iti__selected-country { background: #080808 !important; color: #FFFFFF !important; } #booknetic_theme_8 [data-step-id="information"] .iti input { background: #080808 !important; background-color: #080808 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 1px solid #333333 !important; box-shadow: none !important; } /* --------------------------------------------------------- LABELS --------------------------------------------------------- */ #booknetic_theme_8 [data-step-id="information"] .form-group label { color: #FFD700 !important; } /* --------------------------------------------------------- TEXTAREA — FUTURE SAFE --------------------------------------------------------- */ #booknetic_theme_8 [data-step-id="information"] textarea { background: #080808 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 1px solid #333333 !important; border-radius: 2px !important; box-shadow: none !important; outline: none !important; caret-color: #FFD700 !important; } #booknetic_theme_8 [data-step-id="information"] textarea:focus { background: #050505 !important; border-color: #FFD700 !important; box-shadow: 0 0 0 1px rgba(255,215,0,.08) !important; } /* ========================================================= 4. CART REMOVE MENU — REFINED DESTRUCTIVE COLOUR ========================================================= */ #booknetic_theme_8 .booknetic-cart-item-remove { color: #C94B55 !important; } #booknetic_theme_8 .booknetic-cart-item-remove span { color: #C94B55 !important; } #booknetic_theme_8 .booknetic-cart-item-remove img { opacity: .95 !important; filter: brightness(0) saturate(100%) invert(42%) sepia(32%) saturate(1692%) hue-rotate(306deg) brightness(88%) contrast(92%) !important; } #booknetic_theme_8 .booknetic-cart-item-remove:hover span { color: #E0666F !important; } /* ========================================================= 5. LOYALTY POINT VALUE — DISPLAY £0.10 Booknetic currently renders "1 point = £0.1". CSS replaces only the displayed formatting. ========================================================= */ #booknetic_theme_8 #booknetic-redeem-points-container .point-value { font-size: 0 !important; } #booknetic_theme_8 #booknetic-redeem-points-container .point-value::after { content: "1 point = £0.10" !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 9px !important; font-weight: 400 !important; line-height: 14px !important; letter-spacing: 0 !important; color: #777777 !important; white-space: nowrap !important; } /* ========================================================= 6. SUCCESS SCREEN EMAIL NOTE — MORE READABLE / ELEGANT ========================================================= */ #booknetic_theme_8 .booknetic_appointment_finished_code::after { content: "Please check your email for confirmation. If you don't see it, please check your junk or spam folder." !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 10.5px !important; font-weight: 400 !important; line-height: 17px !important; letter-spacing: .55px !important; text-transform: none !important; color: #A0A0A0 !important; } /* ========================================================= 7. FINISH BOOKING ICON — MATCH VISUAL SCALE The SVG artwork has more internal whitespace, so it needs a slightly larger CSS box than the other action icons. ========================================================= */ #booknetic_theme_8 #booknetic_finish_btn img { width: 21px !important; height: 21px !important; min-width: 21px !important; min-height: 21px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; opacity: 1 !important; filter: none !important; } /* ========================================================= MOBILE POLISH ========================================================= */ @media only screen and (max-width: 767px) { #booknetic_theme_8 .booknetic_warning_message { width: auto !important; max-width: calc(100% - 20px) !important; font-size: 10px !important; line-height: 15px !important; } #booknetic_theme_8 .booknetic_appointment_finished_code::after { font-size: 10px !important; line-height: 16px !important; letter-spacing: .35px !important; } #booknetic_theme_8 #booknetic_finish_btn img { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; } } /* ========================================================= DAMIAN PHILPOTT — MOBILE CART + CONFIRM DETAILS REPAIR Applies only below 768px and only to steps 6 and 7. Steps 1–5, Date & Time, desktop Confirm Details and the success screen are intentionally left unchanged. ========================================================= */ @media only screen and (max-width: 767px) { /* ----------------------------------------------------- SHARED MOBILE CONTAINMENT — CART + CONFIRM ONLY ----------------------------------------------------- */ #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]), #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic_appointment_container, #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic_appointment_container_body{ width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important; overflow-x: hidden !important; } /* Let content determine the panel height rather than holding the footer at the bottom of a tall empty mobile panel. */ #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic_appointment_container_body{ overflow-y: visible !important; padding-bottom: 14px !important; } /* ===================================================== STEP 6 — CART ===================================================== */ #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-holder, #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart, #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-col, #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item, #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-header, #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-body { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-holder { height: auto !important; min-height: 0 !important; padding: 16px 20px 12px !important; margin: 0 !important; overflow: visible !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart { height: auto !important; min-height: 0 !important; margin: 0 !important; overflow: visible !important; flex-wrap: wrap !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-col { flex: 1 1 100% !important; margin: 0 !important; padding: 0 !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item { position: relative !important; margin: 0 !important; overflow: visible !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-body-row { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-body-cell { min-width: 0 !important; overflow-wrap: anywhere !important; } /* Keep the appointment breakdown popup inside the card/mobile viewport. */ #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-info-details { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 8px 0 0 !important; box-sizing: border-box !important; transform: none !important; overflow: hidden !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-info-details-row { width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 10px !important; box-sizing: border-box !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-info-details-cell:first-child { flex: 1 1 auto !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-info-details-cell:last-child { flex: 0 0 auto !important; white-space: nowrap !important; } /* Remove the large empty gap before Add Another Appointment. */ #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .bkntc_again_booking { position: static !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 18px 0 0 !important; box-sizing: border-box !important; } /* Footer follows the cart rather than sitting at the bottom of an artificially tall panel. */ #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic_appointment_container_footer { position: static !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 60px !important; margin-top: 0 !important; box-sizing: border-box !important; } /* ===================================================== STEP 7 — CONFIRM DETAILS ===================================================== */ /* Clean mobile price rows — no dotted leaders and no off-screen prices. */ /* Loyalty / Use Points: expanded panel stays in normal flow instead of floating across the service summary. */ /* Coupon row containment. Cancel remains controlled by Booknetic. */ /* Total must stay in the viewport with value on the right. */ /* Payment choices stay inside the mobile panel. */ /* Confirm footer follows the actual content, eliminating the unnecessary empty black gap before Back / Confirm Booking. */ } /* ========================================================= MOBILE CART + CONFIRM — HARD WIDTH LOCK v2 This deliberately sits LAST so it wins over earlier rules. It only affects Step 6 (cart) and Step 7 (confirm details). ========================================================= */ @media only screen and (max-width: 767px) { /* Keep the WordPress Booknetic block itself from becoming wider than the viewport. */ .wp-block-booknetic-booking { width: 100% !important; max-width: 100vw !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; overflow-x: clip !important; } /* STEP 6 + STEP 7: hard-lock the complete booking shell. */ #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]){ width: 100% !important; max-width: 100vw !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; overflow-x: clip !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic_appointment_container{ width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; overflow-x: clip !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic_appointment_container_header, #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic_appointment_container_body, #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic_appointment_container_footer{ width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: clip !important; } /* Prevent any flex/grid child from forcing its parent wider. */ #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic_appointment_container_body *{ min-width: 0; box-sizing: border-box; } /* ===================================================== STEP 6 — CART ===================================================== */ #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-holder { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 18px 20px 16px !important; box-sizing: border-box !important; overflow-x: clip !important; overflow-y: visible !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart, #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-col, #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart { display: block !important; overflow: visible !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-col { display: block !important; padding: 0 !important; overflow: visible !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item { position: relative !important; overflow: visible !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-header, #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-body, #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-body-row { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* Cart info popup is positioned against the entire card, not the tiny info-icon cell. */ #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-info-details { position: absolute !important; left: 12px !important; right: 12px !important; top: auto !important; bottom: auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 8px 0 0 !important; transform: none !important; box-sizing: border-box !important; overflow-x: hidden !important; z-index: 20 !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-info-details-row { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 12px !important; box-sizing: border-box !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-info-details-cell:first-child { flex: 1 1 auto !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic-cart-item-info-details-cell:last-child { flex: 0 0 auto !important; white-space: nowrap !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .bkntc_again_booking { position: static !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 20px 0 0 !important; box-sizing: border-box !important; } /* Remove the large empty body height on cart. */ #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic_appointment_container_body { height: auto !important; min-height: 0 !important; max-height: none !important; padding-bottom: 0 !important; overflow-y: visible !important; } #booknetic_theme_8:has(.booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"]) .booknetic_appointment_container_footer { position: static !important; height: auto !important; min-height: 60px !important; margin: 0 !important; } /* ===================================================== STEP 7 — CONFIRM DETAILS ===================================================== */ /* Confirm summary rows: flex instead of fixed/dotted desktop layout. */ /* Loyalty block */ /* Coupon line: input flexes, buttons do not force overflow. */ /* Payment methods: two equal columns, always inside viewport. */ /* Deposit area wraps instead of widening the panel. */ /* Remove excessive blank height before footer. */ } /* ========================================================= MOBILE — GLOBAL HORIZONTAL SCROLL LOCK + BOOKNETIC WIDTH LOCK Fixes the whole page/header sliding sideways on mobile. This sits LAST so it overrides earlier Booknetic rules. ========================================================= */ @media only screen and (max-width: 767px) { /* Stop the entire webpage moving horizontally. This is necessary because the header moving proves the overflow is escaping beyond the Booknetic container. */ html, body { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; } /* Common WordPress outer wrappers */ body, #page, .site, .site-content, .wp-site-blocks, main, .entry-content, .wp-block-post-content { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* Booknetic block itself */ .wp-block-booknetic-booking { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; } /* Lock ALL Booknetic steps, not just Cart/Confirm */ #booknetic_theme_8, #booknetic_theme_8 .booknetic_appointment_container, #booknetic_theme_8 .booknetic_appointment_container_header, #booknetic_theme_8 .booknetic_appointment_container_body, #booknetic_theme_8 .booknetic_appointment_container_footer { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } #booknetic_theme_8, #booknetic_theme_8 .booknetic_appointment_container, #booknetic_theme_8 .booknetic_appointment_container_body { overflow-x: hidden !important; } /* Bootstrap rows can use negative margins. Those were responsible for the Fill Information panel escaping the viewport after an account was found. */ #booknetic_theme_8 .form-row { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } #booknetic_theme_8 .form-row > [class*="col-"], #booknetic_theme_8 .form-group, #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"], #booknetic_theme_8 .bkntc-information-step-info-container, #booknetic_theme_8 .bkntc-information-step-info-container > .form-group { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Inputs must include their padding/border inside the width */ #booknetic_theme_8 input, #booknetic_theme_8 select, #booknetic_theme_8 textarea, #booknetic_theme_8 .iti, #booknetic_theme_8 .iti__selected-flag { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #booknetic_theme_8 .form-group input, #booknetic_theme_8 .form-group select, #booknetic_theme_8 .form-group textarea { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Prevent dynamic clear/loading icons from changing field width */ #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] { position: relative !important; overflow: visible !important; } #booknetic_theme_8 .bkntc_input_identifier_clear, #booknetic_theme_8 .bkntc_input_identifier_loading { right: 8px !important; left: auto !important; max-width: 28px !important; } /* Information panel: force it inside the booking body */ #booknetic_theme_8 .bkntc-information-step-info-container { padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden !important; } /* Long text must wrap instead of expanding the page */ #booknetic_theme_8 .bkntc-information-step-info-container, #booknetic_theme_8 .bkntc-information-step-info-container *, #booknetic_theme_8 .booknetic_card, #booknetic_theme_8 .booknetic_service_card, #booknetic_theme_8 .booknetic-cart-item, #booknetic_theme_8 .booknetic_confirm_step_body { overflow-wrap: anywhere !important; word-break: normal !important; } /* Safety: direct children of the main booking body are not allowed to exceed the available mobile width. */ #booknetic_theme_8 .booknetic_appointment_container_body > * { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } } /* ========================================================= iPHONE SAFARI — PREVENT FORM FOCUS AUTO-ZOOM Safari zooms the entire page when a focused input has a computed font-size below 16px. That is why the site/header appears to slide and pinching snaps it back into place. ========================================================= */ @media only screen and (max-width: 767px) { #booknetic_theme_8 input, #booknetic_theme_8 select, #booknetic_theme_8 textarea, #booknetic_theme_8 input[type="text"], #booknetic_theme_8 input[type="email"], #booknetic_theme_8 input[type="tel"], #booknetic_theme_8 input[type="number"], #booknetic_theme_8 input[type="search"], #booknetic_theme_8 .iti input, #booknetic_theme_8 .iti__tel-input, #booknetic_theme_8 #booknetic_coupon, #booknetic_theme_8 #bookneticUsePoints { font-size: 16px !important; line-height: 1.35 !important; } /* Keep Safari from applying additional text scaling. */ html { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } } /* ========================================================= MOBILE CONFIRM — RESTORE TOTAL PRICE VALUE Keeps the total amount visible on the right-hand side. ========================================================= */ @media only screen and (max-width: 767px) { /* The dynamic Booknetic total value */ /* Safety for Booknetic versions where the amount is wrapped in an extra span inside .booknetic_sum_price */ } /* ========================================================= DATE & TIME — POST-UPDATE WRAPPER FIX Targets the exact current Booknetic markup. ========================================================= */ #booknetic_theme_8 [data-step-id="date_time"] .booknetic_date_time_area { background: #000000 !important; } /* LEFT — CALENDAR PANEL */ #booknetic_theme_8 [data-step-id="date_time"] .booknetic_calendar_div { background: #050505 !important; border: 1px solid #242424 !important; box-shadow: none !important; } #booknetic_theme_8 [data-step-id="date_time"] .booknetic_calendar_head { background: #0A0A0A !important; border-bottom: 1px solid #242424 !important; color: #FFFFFF !important; } #booknetic_theme_8 [data-step-id="date_time"] .booknetic_month_name { color: #FFFFFF !important; } #booknetic_theme_8 [data-step-id="date_time"] .booknetic_prev_month, #booknetic_theme_8 [data-step-id="date_time"] .booknetic_next_month { color: #FFD700 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #booknetic_theme_8 [data-step-id="date_time"] #booknetic_calendar_area, #booknetic_theme_8 [data-step-id="date_time"] .booknetic_calendar, #booknetic_theme_8 [data-step-id="date_time"] .booknetic_calendar_rows, #booknetic_theme_8 [data-step-id="date_time"] .booknetic_week_names { background: #050505 !important; color: #FFFFFF !important; box-shadow: none !important; } #booknetic_theme_8 [data-step-id="date_time"] .booknetic_week_names .booknetic_td { background: #050505 !important; color: #8C8C8C !important; } /* RIGHT — TIME PANEL */ #booknetic_theme_8 [data-step-id="date_time"] .booknetic_time_div { background: #050505 !important; border: 1px solid #242424 !important; box-shadow: none !important; } #booknetic_theme_8 [data-step-id="date_time"] .booknetic_times_head { background: #0A0A0A !important; color: #FFFFFF !important; border-bottom: 1px solid #242424 !important; } #booknetic_theme_8 [data-step-id="date_time"] .booknetic_times { background: #050505 !important; color: #FFFFFF !important; } #booknetic_theme_8 [data-step-id="date_time"] .booknetic_times_title { background: #050505 !important; color: #AFAFAF !important; border-bottom: 1px solid #242424 !important; } #booknetic_theme_8 [data-step-id="date_time"] .booknetic_times_list { background: #050505 !important; } /* Keep current slot styling clean */ #booknetic_theme_8 [data-step-id="date_time"] .booknetic_time_element { background: #101010 !important; color: #FFFFFF !important; border: 1px solid #303030 !important; box-shadow: none !important; } #booknetic_theme_8 [data-step-id="date_time"] .booknetic_time_element:hover { background: #171717 !important; border-color: #666666 !important; } #booknetic_theme_8 [data-step-id="date_time"] .booknetic_time_element.booknetic_selected_time { background: #FFD700 !important; color: #000000 !important; border-color: #FFD700 !important; } /* Busy-slot tooltip */ #booknetic_theme_8 [data-step-id="date_time"] .booknetic_dropdown { background: #0A0A0A !important; color: #FFFFFF !important; border: 1px solid #FFD700 !important; box-shadow: none !important; } #booknetic_theme_8 [data-step-id="date_time"] .booknetic_dropdown .content { color: #FFFFFF !important; } /* ========================================================= CURRENT BOOKING FLOW FIXES — SEPTEMBER 2026 1. Service price visibility 2. Information-step Gender / Select2 styling 3. Global booking footer background ========================================================= */ /* ========================================================= 1. SELECT SERVICE — FORCE PRICES / FREE LABEL VISIBLE ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_price, #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_price *, #booknetic_theme_8 [data-step-id="service"] .booknetic_free_badge, #booknetic_theme_8 [data-step-id="service"] .booknetic_free_badge * { color: #FFD700 !important; opacity: 1 !important; visibility: visible !important; text-shadow: none !important; filter: none !important; } /* ========================================================= 2. FILL INFORMATION — GENDER / SELECT2 Keeps the custom Gender control consistent with the other black / gold Booknetic information fields. ========================================================= */ #booknetic_theme_8 [data-step-id="information"] .select2-container { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection, #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection--single, #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection--multiple { min-height: 46px !important; height: 46px !important; padding: 0 40px 0 12px !important; display: flex !important; align-items: center !important; background: #080808 !important; color: #FFFFFF !important; border: 1px solid #333333 !important; border-radius: 2px !important; box-shadow: none !important; outline: none !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__rendered { width: 100% !important; padding: 0 !important; color: #FFFFFF !important; font-family: Helvetica, Arial, sans-serif !important; line-height: 44px !important; background: transparent !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__placeholder { color: #777777 !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__arrow { top: 0 !important; right: 10px !important; width: 22px !important; height: 44px !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__arrow b { border-top-color: #FFD700 !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container.select2-container--open .select2-selection, #booknetic_theme_8 [data-step-id="information"] .select2-container.select2-container--focus .select2-selection { background: #050505 !important; border-color: #FFD700 !important; box-shadow: 0 0 0 1px rgba(255,215,0,.08) !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__clear { color: #888888 !important; margin-right: 8px !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__clear:hover { color: #FFD700 !important; } /* Select2 dropdown is commonly attached to , so scope it to pages containing the Booknetic booking block. */ body:has(.wp-block-booknetic-booking) .select2-dropdown { background: #080808 !important; color: #FFFFFF !important; border: 1px solid #FFD700 !important; border-radius: 0 0 2px 2px !important; box-shadow: 0 10px 28px rgba(0,0,0,.45) !important; } body:has(.wp-block-booknetic-booking) .select2-search--dropdown { padding: 8px !important; background: #080808 !important; } body:has(.wp-block-booknetic-booking) .select2-search--dropdown .select2-search__field { width: 100% !important; min-height: 38px !important; padding: 7px 10px !important; background: #050505 !important; color: #FFFFFF !important; border: 1px solid #333333 !important; border-radius: 2px !important; outline: none !important; box-shadow: none !important; } body:has(.wp-block-booknetic-booking) .select2-search--dropdown .select2-search__field:focus { border-color: #FFD700 !important; } body:has(.wp-block-booknetic-booking) .select2-results { background: #080808 !important; } body:has(.wp-block-booknetic-booking) .select2-results__option { padding: 10px 12px !important; background: #080808 !important; color: #D0D0D0 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 13px !important; } body:has(.wp-block-booknetic-booking) .select2-results__option--highlighted, body:has(.wp-block-booknetic-booking) .select2-results__option[aria-selected="true"], body:has(.wp-block-booknetic-booking) .select2-results__option--selected { background: #151515 !important; color: #FFD700 !important; } /* ========================================================= 3. GLOBAL BOOKING FOOTER — REMOVE WHITE STRIP ========================================================= */ .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_container_footer { background: #0A0A0A !important; color: #FFFFFF !important; border-top: 1px solid #242424 !important; box-shadow: none !important; -webkit-box-shadow: none !important; filter: none !important; height: auto !important; min-height: 60px !important; padding: 10px 20px !important; align-items: center !important; overflow: visible !important; box-sizing: border-box !important; flex-shrink: 0 !important; } /* Keep footer warning area dark if/when it appears */ .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_warning_message { background: #080808 !important; color: #FFD700 !important; border-color: #FFD700 !important; } /* Reinforce established footer button treatment */ .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_btn_primary { background: #FFD700 !important; color: #000000 !important; border-color: #FFD700 !important; box-shadow: none !important; } .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_btn_primary:hover { background: #000000 !important; color: #FFD700 !important; border-color: #FFD700 !important; } .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_btn_secondary.booknetic_prev_step { background: #000000 !important; color: #FFFFFF !important; border-color: #444444 !important; box-shadow: none !important; } .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_container_footer .booknetic_btn_secondary.booknetic_prev_step:hover { background: #000000 !important; color: #FFD700 !important; border-color: #FFD700 !important; } /* ========================================================= BOOKNETIC — REMOVE OUTER GLOW / DROP SHADOW Final override: targets the booking shell and its major structural wrappers, including pseudo-elements. ========================================================= */ .wp-block-booknetic-booking, .wp-block-booknetic-booking #booknetic_theme_8, .wp-block-booknetic-booking #booknetic_theme_8.booknetic_appointment, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_steps, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_container, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_container_header, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_container_body, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_container_footer { box-shadow: none !important; -webkit-box-shadow: none !important; filter: none !important; -webkit-filter: none !important; text-shadow: none !important; } /* Theme 8 can also paint effects through generated layers */ .wp-block-booknetic-booking::before, .wp-block-booknetic-booking::after, .wp-block-booknetic-booking #booknetic_theme_8::before, .wp-block-booknetic-booking #booknetic_theme_8::after, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_steps::before, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_steps::after, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_container::before, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic_appointment_container::after { box-shadow: none !important; -webkit-box-shadow: none !important; filter: none !important; -webkit-filter: none !important; } /* Keep the booking shell itself completely flat */ .wp-block-booknetic-booking #booknetic_theme_8 { box-shadow: none !important; -webkit-box-shadow: none !important; filter: none !important; -webkit-filter: none !important; } /* ========================================================= ADD TO CART — ACTIVE APPOINTMENT CARD Remove bright white side rails / active glow and use the restrained Damian Philpott gold active-state border. ========================================================= */ .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-item { outline: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; } .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-item.active { background: #080808 !important; border: 1px solid rgba(255, 215, 0, .62) !important; outline: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; filter: none !important; } /* Remove Theme 8 generated active-state rails/highlights */ .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-item.active::before, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-item.active::after { content: none !important; display: none !important; border: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* Keep hover restrained when the active card is hovered */ .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-item.active:hover { background: #0B0B0B !important; border-color: #FFD700 !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* ========================================================= FILL INFORMATION — PHONE COUNTRY DROPDOWN (intl-tel-input) Match Damian Philpott black / gold styling. ========================================================= */ #booknetic_theme_8 .iti { width: 100% !important; } #booknetic_theme_8 .iti__selected-country { background: transparent !important; color: #FFFFFF !important; border: 0 !important; box-shadow: none !important; } #booknetic_theme_8 .iti__selected-dial-code { color: #A8A8A8 !important; } #booknetic_theme_8 .iti__arrow { border-top-color: #FFD700 !important; } #booknetic_theme_8 .iti__dropdown-content { background: #080808 !important; color: #FFFFFF !important; border: 1px solid #333333 !important; border-top-color: #FFD700 !important; border-radius: 2px !important; box-shadow: 0 14px 32px rgba(0,0,0,.45) !important; overflow: hidden !important; } #booknetic_theme_8 .iti__search-input-wrapper { background: #080808 !important; padding: 8px !important; border-bottom: 1px solid #222222 !important; } #booknetic_theme_8 .iti__search-input { width: 100% !important; min-height: 38px !important; padding: 7px 10px 7px 30px !important; background: #050505 !important; color: #FFFFFF !important; border: 1px solid #333333 !important; border-radius: 2px !important; outline: none !important; box-shadow: none !important; box-sizing: border-box !important; } #booknetic_theme_8 .iti__search-input:focus { border-color: #FFD700 !important; } #booknetic_theme_8 .iti__search-input::placeholder { color: #777777 !important; } #booknetic_theme_8 .iti__search-icon { left: 16px !important; color: #FFD700 !important; } #booknetic_theme_8 .iti__search-icon-svg { stroke: #FFD700 !important; } #booknetic_theme_8 .iti__search-clear { background: transparent !important; border: 0 !important; box-shadow: none !important; } #booknetic_theme_8 .iti__search-clear-bg { fill: #252525 !important; } #booknetic_theme_8 .iti__search-clear-x { stroke: #FFD700 !important; } #booknetic_theme_8 .iti__country-list { background: #080808 !important; color: #D6D6D6 !important; scrollbar-color: #FFD700 #111111 !important; } #booknetic_theme_8 .iti__country { background: #080808 !important; color: #D6D6D6 !important; padding: 9px 12px !important; border-left: 2px solid transparent !important; } #booknetic_theme_8 .iti__country-name { color: #E8E8E8 !important; } #booknetic_theme_8 .iti__dial-code { color: #8D8D8D !important; } #booknetic_theme_8 .iti__country:hover, #booknetic_theme_8 .iti__country.iti__highlight { background: #141414 !important; border-left-color: #FFD700 !important; } #booknetic_theme_8 .iti__country:hover .iti__country-name, #booknetic_theme_8 .iti__country.iti__highlight .iti__country-name { color: #FFD700 !important; } #booknetic_theme_8 .iti__country:hover .iti__dial-code, #booknetic_theme_8 .iti__country.iti__highlight .iti__dial-code { color: #C9C9C9 !important; } #booknetic_theme_8 .iti__country[aria-selected="true"] { background: rgba(255,215,0,.07) !important; border-left-color: #FFD700 !important; } #booknetic_theme_8 .iti__country[aria-selected="true"] .iti__country-name { color: #FFD700 !important; } #booknetic_theme_8 .iti__no-results, #booknetic_theme_8 .iti__a11y-text { color: #A0A0A0 !important; } @media only screen and (max-width: 600px) { #booknetic_theme_8 .iti__dropdown-content { max-width: calc(100vw - 32px) !important; } } /* ========================================================= ADD TO CART — REMOVE WHITE SIDE RAILS These rails are coming from the cart column / generated decoration rather than the appointment card itself. ========================================================= */ .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-col { position: relative !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; filter: none !important; } /* Kill any generated left/right rail decoration */ .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-col::before, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-col::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* Ensure no nested cart wrapper is drawing white side borders */ .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-col > *, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-item { border-left-color: transparent !important; border-right-color: transparent !important; outline: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* Restore the intended active card as ONE thin gold outline */ .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-item.active { border: 1px solid rgba(255, 215, 0, .68) !important; border-left: 1px solid rgba(255, 215, 0, .68) !important; border-right: 1px solid rgba(255, 215, 0, .68) !important; background: #080808 !important; outline: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* Theme pseudo-elements on the card must not recreate the rails */ .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-item::before, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-item::after, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-item.active::before, .wp-block-booknetic-booking #booknetic_theme_8 .booknetic-cart-item.active::after { content: none !important; display: none !important; border: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* ========================================================= FILL INFORMATION — PHONE COUNTRY LIST CLEANUP Remove theme list bullets/markers and tighten country rows. ========================================================= */ #booknetic_theme_8 .iti__country-list, #booknetic_theme_8 .iti__country-list ul { list-style: none !important; list-style-type: none !important; margin: 0 !important; padding: 0 !important; } #booknetic_theme_8 .iti__country, #booknetic_theme_8 .iti__country-list li { list-style: none !important; list-style-type: none !important; margin: 0 !important; padding: 6px 10px !important; min-height: 30px !important; line-height: 1.15 !important; display: flex !important; align-items: center !important; gap: 7px !important; box-sizing: border-box !important; } #booknetic_theme_8 .iti__country::before, #booknetic_theme_8 .iti__country::after, #booknetic_theme_8 .iti__country-list li::before, #booknetic_theme_8 .iti__country-list li::after, #booknetic_theme_8 .iti__country::marker, #booknetic_theme_8 .iti__country-list li::marker { content: none !important; display: none !important; } #booknetic_theme_8 .iti__flag-box, #booknetic_theme_8 .iti__flag { flex: 0 0 auto !important; margin: 0 !important; } #booknetic_theme_8 .iti__country-name, #booknetic_theme_8 .iti__dial-code { line-height: 1.15 !important; } #booknetic_theme_8 .iti__dial-code { margin-left: auto !important; } /* Keep selected / hovered rows compact too */ #booknetic_theme_8 .iti__country:hover, #booknetic_theme_8 .iti__country.iti__highlight, #booknetic_theme_8 .iti__country[aria-selected="true"] { padding-top: 6px !important; padding-bottom: 6px !important; } /* ========================================================= FINAL POLISH — PHONE COUNTRY SELECTOR Fix selected-country tick and stray search dot. ========================================================= */ /* Keep country rows positioned for the selected-state tick */ #booknetic_theme_8 .iti__country { position: relative !important; } /* Replace the default/incorrect selected indicator with a clean gold tick */ #booknetic_theme_8 .iti__country[aria-selected="true"]::after { content: "✓" !important; display: block !important; position: static !important; margin-left: 8px !important; width: auto !important; height: auto !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; } /* Never show the search-clear control while intl-tel-input marks it hidden */ #booknetic_theme_8 .iti__search-clear.iti__hide { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* When the clear control is legitimately visible, make it a clean gold X */ #booknetic_theme_8 .iti__search-clear:not(.iti__hide) { display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #booknetic_theme_8 .iti__search-clear-bg { fill: transparent !important; } #booknetic_theme_8 .iti__search-clear-x { stroke: #FFD700 !important; } /* ========================================================= FINAL POLISH — FINISH BOOKING ICON Black on gold; gold again on hover. ========================================================= */ #booknetic_theme_8 .booknetic_finish_booking_btn img { filter: brightness(0) !important; -webkit-filter: brightness(0) !important; } #booknetic_theme_8 .booknetic_finish_booking_btn:hover img { filter: none !important; -webkit-filter: none !important; } /* ========================================================= FINAL POLISH 2 — COUNTRY SELECTED STATE Remove the original dark selected marker so only our gold tick remains. ========================================================= */ #booknetic_theme_8 .iti__country[aria-selected="true"]::before, #booknetic_theme_8 .iti__country[aria-selected="true"] .iti__country-name::before, #booknetic_theme_8 .iti__country[aria-selected="true"] .iti__country-name::after, #booknetic_theme_8 .iti__country[aria-selected="true"] .iti__dial-code::before, #booknetic_theme_8 .iti__country[aria-selected="true"] .iti__dial-code::after, #booknetic_theme_8 .iti__country.iti__active::before { content: none !important; display: none !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* Keep exactly one selected-state tick: our gold tick */ #booknetic_theme_8 .iti__country[aria-selected="true"]::after { content: "✓" !important; display: block !important; margin-left: auto !important; color: #FFD700 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; } /* ========================================================= SUCCESS SCREEN — FINISH BOOKING ICON Correct selector: button ID is #booknetic_finish_btn. Gold button = black icon. Hover black button = gold icon. ========================================================= */ #booknetic_theme_8 #booknetic_finish_btn img { filter: brightness(0) saturate(100%) !important; -webkit-filter: brightness(0) saturate(100%) !important; } #booknetic_theme_8 #booknetic_finish_btn:hover img { filter: brightness(0) saturate(100%) invert(84%) sepia(100%) saturate(1568%) hue-rotate(359deg) brightness(104%) contrast(104%) !important; -webkit-filter: brightness(0) saturate(100%) invert(84%) sepia(100%) saturate(1568%) hue-rotate(359deg) brightness(104%) contrast(104%) !important; } /* ========================================================= FINAL POLISH 3 — PHONE COUNTRY SELECTED INDICATOR intl-tel-input injects its own SVG: .iti__country-check-svg Hide that native marker so only our gold CSS tick remains. ========================================================= */ #booknetic_theme_8 .iti__country-check-svg { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Keep one clean gold tick only */ #booknetic_theme_8 .iti__country[aria-selected="true"]::after { content: "✓" !important; display: block !important; visibility: visible !important; opacity: 1 !important; margin-left: auto !important; color: #FFD700 !important; -webkit-text-fill-color: #FFD700 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; } /* ========================================================= SELECT SERVICE EXTRAS — PRICE ALWAYS VISIBLE Price must remain gold before selection, on hover and after selection. Do not let Theme 8 darken it until selected. ========================================================= */ .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service_extras"] .booknetic_service_extra_card_price, .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service_extras"] .booknetic_service_extra_card .booknetic_service_extra_card_price, .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service_extras"] .booknetic_service_extra_card:hover .booknetic_service_extra_card_price, .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service_extras"] .booknetic_service_extra_card.booknetic_service_extra_card_selected .booknetic_service_extra_card_price { color: #FFD700 !important; -webkit-text-fill-color: #FFD700 !important; opacity: 1 !important; visibility: visible !important; filter: none !important; -webkit-filter: none !important; text-shadow: none !important; } /* In case Booknetic wraps the price in another element */ .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service_extras"] .booknetic_service_extra_card_price * { color: #FFD700 !important; -webkit-text-fill-color: #FFD700 !important; opacity: 1 !important; visibility: visible !important; } /* ========================================================= MOBILE PACKAGE PRICE — SAFE FLEX FIX v14 --------------------------------------------------------- Keeps the original package card/title layout completely intact. Only returns the package price to normal flex flow so discounted prices cannot sit over the description. ========================================================= */ @media only screen and (max-width: 767px) { /* * IMPORTANT: * Do not change .booknetic_package_card_title dimensions. * Booknetic already lays out image / title / price correctly. */ #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_price, #booknetic_theme_8 .booknetic_package_card .booknetic_package_price, #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_prices, #booknetic_theme_8 .booknetic_package_card .booknetic_package_prices { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; transform: none !important; float: none !important; flex: 0 0 auto !important; align-self: flex-start !important; width: auto !important; max-width: 120px !important; min-width: max-content !important; height: auto !important; min-height: 0 !important; margin: 0 0 0 10px !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: flex-start !important; gap: 1px !important; box-sizing: border-box !important; text-align: right !important; white-space: nowrap !important; color: #FFD700 !important; -webkit-text-fill-color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important; z-index: auto !important; } /* Reset only elements INSIDE the actual price container. */ #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_price *, #booknetic_theme_8 .booknetic_package_card .booknetic_package_price *, #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_prices *, #booknetic_theme_8 .booknetic_package_card .booknetic_package_prices * { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; transform: none !important; float: none !important; width: auto !important; max-width: 120px !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; white-space: nowrap !important; text-align: right !important; } /* Original price */ #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_price del, #booknetic_theme_8 .booknetic_package_card .booknetic_package_price del, #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_prices del, #booknetic_theme_8 .booknetic_package_card .booknetic_package_prices del, #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_price s, #booknetic_theme_8 .booknetic_package_card .booknetic_package_price s, #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_prices s, #booknetic_theme_8 .booknetic_package_card .booknetic_package_prices s { color: #777777 !important; -webkit-text-fill-color: #777777 !important; font-size: 11px !important; font-weight: 400 !important; text-decoration: line-through !important; text-decoration-thickness: 1px !important; } /* Discounted / current price */ #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_price ins, #booknetic_theme_8 .booknetic_package_card .booknetic_package_price ins, #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_prices ins, #booknetic_theme_8 .booknetic_package_card .booknetic_package_prices ins { color: #FFD700 !important; -webkit-text-fill-color: #FFD700 !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; } } @media only screen and (max-width: 767px) { #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_price, #booknetic_theme_8 .booknetic_package_card .booknetic_package_price, #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_prices, #booknetic_theme_8 .booknetic_package_card .booknetic_package_prices { margin-top: 10px !important; margin-right: 8px !important; } } @media only screen and (max-width: 767px) { #booknetic_theme_8 .booknetic_package_card del, #booknetic_theme_8 .booknetic_package_card s { font-size: 13px !important; font-weight: 400 !important; opacity: 0.65 !important; } #booknetic_theme_8 .booknetic_package_card ins { font-size: 16px !important; font-weight: 700 !important; opacity: 1 !important; } } /* ============================================================ STAGE 1 CONSOLIDATION — 14 SEPTEMBER 2026 ============================================================ The useful UNIQUE rules formerly held in: - 1309.css — Global Booknetic Fixes - 1337.css — Booknetic Utility Styles After installing this master stylesheet, 1309.css and 1337.css can be deactivated. Their duplicated/conflicting footer, warning, date/time and mobile package-price rules are intentionally NOT copied here because the Booknetic Master already owns them. ============================================================ */ /* ============================================================ BOOKING PAGE TITLE Formerly unique to 1309.css. ============================================================ */ body:has(.wp-block-booknetic-booking) .page-title h1, body:has(.wp-block-booknetic-booking) .page-title .h2 { position: relative !important; display: inline-block !important; margin: 0 !important; padding-bottom: 18px !important; color: #FFFFFF !important; font-family: Helvetica, Arial, sans-serif !important; font-weight: 400 !important; letter-spacing: -1px !important; } body:has(.wp-block-booknetic-booking) .page-title h1::after, body:has(.wp-block-booknetic-booking) .page-title .h2::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: 0 !important; width: 72% !important; height: 2px !important; background: #FFD700 !important; } /* ============================================================ PACKAGE ACCORDION SAFETY Formerly unique to 1337.css. ============================================================ */ #booknetic_theme_8 [data-step-id="service"] .dp-package-accordion:not(.active) > :not(.booknetic_service_category) { display: none !important; } /* ============================================================ SERVICE STEP SCROLLING Formerly unique to 1337.css. ============================================================ */ #booknetic_theme_8 .booknetic_appointment_container_body:has( [data-step-id="service"][style*="display: block"] ) { overflow-y: auto !important; overflow-x: hidden !important; scroll-behavior: smooth !important; overscroll-behavior: contain !important; } /* ========================================================= DAMIAN PHILPOTT — PACKAGE INFORMATION FORM FALLBACK Exact live Booknetic customer-info markup. Applies when package flow renders customer fields outside the normal [data-step-id="information"] wrapper. ========================================================= */ #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] input.form-control, #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] input.bkntc_input_identifier_input, #booknetic_theme_8 .booknetic_appointment_container_body .form-group input.form-control { background-color: #080808 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 1px solid #333333 !important; border-radius: 2px !important; box-shadow: none !important; outline: none !important; caret-color: #FFD700 !important; box-sizing: border-box !important; } #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] input.form-control::placeholder, #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] input.bkntc_input_identifier_input::placeholder, #booknetic_theme_8 .booknetic_appointment_container_body .form-group input.form-control::placeholder { color: #767676 !important; -webkit-text-fill-color: #767676 !important; opacity: 1 !important; } #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] input.form-control:focus, #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] input.bkntc_input_identifier_input:focus, #booknetic_theme_8 .booknetic_appointment_container_body .form-group input.form-control:focus { background-color: #050505 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border-color: #FFD700 !important; box-shadow: 0 0 0 1px rgba(255,215,0,.08) !important; } #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] label, #booknetic_theme_8 .booknetic_appointment_container_body .form-group[data-bkntc-customer-info="true"] label { color: #FFD700 !important; } #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] .iti, #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] .iti__selected-country, #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] .iti__selected-flag { background-color: #080808 !important; color: #FFFFFF !important; } #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] input:-webkit-autofill, #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] input:-webkit-autofill:hover, #booknetic_theme_8 .form-group[data-bkntc-customer-info="true"] input:-webkit-autofill:focus { -webkit-text-fill-color: #FFFFFF !important; -webkit-box-shadow: 0 0 0 1000px #080808 inset !important; box-shadow: 0 0 0 1000px #080808 inset !important; border-color: #333333 !important; caret-color: #FFD700 !important; } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V2 — SELECT STAFF REFINEMENT Goals: - one stylist feels intentional rather than lost - adaptive multi-staff grid remains supported - larger premium portrait/card - hide public email / phone from stylist choice - stronger selected state - remove excess blank height on Staff step - responsive portrait + landscape treatment ========================================================= */ /* ========================================================= STAFF STEP — REMOVE ARTIFICIAL HEIGHT ========================================================= */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="staff"] ) .booknetic_appointment_container, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="staff"] ) .booknetic_appointment_container_body { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="staff"] ) .booknetic_appointment_container_body { padding-bottom: 0 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="staff"] ) .booknetic_appointment_container_footer { position: static !important; width: 100% !important; height: auto !important; min-height: 60px !important; margin: 0 !important; } /* ========================================================= STAFF GRID 1 stylist = centred 2+ stylists = adaptive wrapped grid ========================================================= */ #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_container { display: grid !important; grid-template-columns: repeat( auto-fit, minmax(240px, 280px) ) !important; justify-content: center !important; align-items: start !important; gap: 18px !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 20px 20px 24px !important; box-sizing: border-box !important; } /* ========================================================= STAFF CARD ========================================================= */ #booknetic_theme_8 [data-step-id="staff"] .booknetic_card { position: relative !important; width: 100% !important; min-width: 0 !important; max-width: 280px !important; min-height: 300px !important; height: auto !important; margin: 0 !important; padding: 28px 24px 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; background: #050505 !important; border: 1px solid #2A2A2A !important; border-radius: 2px !important; box-shadow: none !important; text-align: center !important; overflow: visible !important; box-sizing: border-box !important; transition: background-color .2s ease, border-color .2s ease, transform .2s ease !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_card:hover { background: #090909 !important; border-color: #5A5A5A !important; transform: translateY(-1px) !important; } /* ========================================================= SELECTED STAFF ========================================================= */ #booknetic_theme_8 [data-step-id="staff"] .booknetic_card.booknetic_card_selected { background: #090909 !important; border: 1px solid #FFD700 !important; box-shadow: inset 0 0 0 1px rgba(255, 215, 0, .05) !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_card.booknetic_card_selected::after { content: "✓" !important; position: absolute !important; top: 12px !important; right: 12px !important; width: 22px !important; height: 22px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #FFD700 !important; color: #000000 !important; border: 0 !important; border-radius: 50% !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; box-shadow: none !important; z-index: 5 !important; } /* ========================================================= PORTRAIT ========================================================= */ #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_image { width: 96px !important; height: 96px !important; min-width: 96px !important; margin: 0 auto 18px !important; flex: 0 0 96px !important; border-radius: 50% !important; overflow: hidden !important; } /* ========================================================= NAME ========================================================= */ #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_title { width: 100% !important; min-width: 0 !important; margin: 0 !important; text-align: center !important; overflow: visible !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_title_first { display: block !important; color: #FFD700 !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -.1px !important; text-align: center !important; } /* ========================================================= ROLE + EXPERIENCE LINE ========================================================= */ #booknetic_theme_8 [data-step-id="staff"] .booknetic_staff_profession { display: block !important; width: 100% !important; margin: 8px 0 0 !important; color: #E6E6E6 !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.45 !important; letter-spacing: 1.15px !important; text-align: center !important; text-transform: uppercase !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_staff_profession::after { content: "Over 38 years of experience creating personalised hair that suits your lifestyle." !important; display: block !important; max-width: 210px !important; margin: 14px auto 0 !important; color: #9A9A9A !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: 0 !important; text-align: center !important; text-transform: none !important; } /* ========================================================= HIDE PUBLIC CONTACT DETAILS Keep the actual Booknetic data untouched. ========================================================= */ #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_description { width: 100% !important; max-width: none !important; margin: 0 !important; text-align: center !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_description > div:not(.booknetic_staff_profession) { display: none !important; } /* ========================================================= PORTRAIT MOBILE ========================================================= */ @media only screen and (max-width: 767px) { #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_container { grid-template-columns: minmax(0, 1fr) !important; justify-items: center !important; gap: 14px !important; padding: 16px 14px 20px !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_card { width: 100% !important; max-width: 360px !important; min-height: 0 !important; padding: 24px 22px 22px !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_image { width: 86px !important; height: 86px !important; min-width: 86px !important; margin: 0 auto 15px !important; flex: 0 0 86px !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_title_first { font-size: 16px !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_staff_profession { font-size: 9px !important; letter-spacing: 1px !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_staff_profession::after { max-width: 240px !important; margin-top: 12px !important; font-size: 10.5px !important; } } /* ========================================================= SHORT LANDSCAPE PHONES Compact horizontal card to save vertical space. ========================================================= */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_container { grid-template-columns: minmax(0, 420px) !important; padding: 12px 16px 16px !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_card { max-width: 420px !important; min-height: 0 !important; padding: 16px 18px !important; display: grid !important; grid-template-columns: 74px minmax(0, 1fr) !important; column-gap: 18px !important; align-items: center !important; text-align: left !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_image { width: 74px !important; height: 74px !important; min-width: 74px !important; margin: 0 !important; flex: none !important; grid-row: 1 / span 2 !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_title, #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_description { text-align: left !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_title_first, #booknetic_theme_8 [data-step-id="staff"] .booknetic_staff_profession { text-align: left !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_staff_profession::after { max-width: none !important; margin: 8px 0 0 !important; text-align: left !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V3 — STAFF STEP FINAL POLISH - slightly tighter portrait-mobile staff card - restores safe booking-page title clearance in landscape - keeps the V2 desktop and horizontal landscape staff card otherwise unchanged ========================================================= */ /* ========================================================= PORTRAIT MOBILE — TIGHTER STAFF CARD ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="staff"] .booknetic_card { padding: 20px 20px 18px !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_card_image { margin-bottom: 13px !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_staff_profession { margin-top: 7px !important; } #booknetic_theme_8 [data-step-id="staff"] .booknetic_staff_profession::after { margin-top: 10px !important; line-height: 1.48 !important; } } /* ========================================================= LANDSCAPE PHONE — BOOKING PAGE TITLE CLEARANCE Uses the same short-landscape trigger as the site header. ========================================================= */ @media screen and (orientation: landscape) and (max-height: 600px) { body:has(.wp-block-booknetic-booking) .site-content { overflow: visible !important; } body:has(.wp-block-booknetic-booking) .page-title { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 14px 0 16px !important; padding: 0 !important; overflow: visible !important; z-index: 2 !important; } body:has(.wp-block-booknetic-booking) .page-title h1, body:has(.wp-block-booknetic-booking) .page-title .h2 { position: relative !important; display: inline-block !important; margin: 0 !important; padding: 0 0 10px !important; font-size: 28px !important; line-height: 1.08 !important; overflow: visible !important; } body:has(.wp-block-booknetic-booking) .page-title h1::after, body:has(.wp-block-booknetic-booking) .page-title .h2::after { bottom: 0 !important; height: 2px !important; } /* Keep the Booknetic block itself from pulling upward into the page title area. */ body:has(.wp-block-booknetic-booking) .wp-block-booknetic-booking { margin-top: 0 !important; transform: none !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V4 — SELECT SERVICE REFINEMENT Refines the service-category screen without changing Booknetic's underlying markup or behaviour. ========================================================= */ /* ========================================================= SERVICE STEP — CONTENT SHOULD SIZE TO WHAT IS THERE ========================================================= */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container_body { height: auto !important; min-height: 0 !important; max-height: none !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container_body { padding: 18px 20px 20px !important; overflow-y: visible !important; overflow-x: hidden !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container_footer { position: static !important; width: 100% !important; height: auto !important; min-height: 60px !important; margin: 0 !important; } /* ========================================================= SEARCH ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper { position: relative !important; width: 100% !important; margin: 0 0 16px !important; background: transparent !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper::before { content: "" !important; position: absolute !important; left: 14px !important; top: 50% !important; width: 16px !important; height: 16px !important; transform: translateY(-50%) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 16px 16px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23FFD700' stroke-width='1.7'/%3E%3Cpath d='M15.5 15.5L21 21' fill='none' stroke='%23FFD700' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") !important; pointer-events: none !important; z-index: 2 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_input { width: 100% !important; height: 46px !important; padding: 0 14px 0 43px !important; background: #060606 !important; color: #FFFFFF !important; border: 1px solid #303030 !important; border-radius: 2px !important; box-shadow: none !important; outline: none !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; transition: background-color .2s ease, border-color .2s ease !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_input::placeholder { color: #777777 !important; opacity: 1 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_input:focus { background: #090909 !important; border-color: #FFD700 !important; box-shadow: 0 0 0 1px rgba(255, 215, 0, .05) !important; } /* ========================================================= CATEGORY STACK ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_categories, #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion { box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion { width: 100% !important; margin: 0 0 9px !important; background: transparent !important; } /* ========================================================= CATEGORY CARD ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category { position: relative !important; display: block !important; width: 100% !important; min-height: 72px !important; margin: 0 !important; padding: 15px 54px 28px 74px !important; background: #050505 !important; color: #F2F2F2 !important; border: 1px solid #292929 !important; border-radius: 2px !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; box-sizing: border-box !important; cursor: pointer !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category:hover { background: #090909 !important; color: #FFFFFF !important; border-color: #555555 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active > .booknetic_service_category { background: #090909 !important; color: #FFFFFF !important; border-color: #FFD700 !important; } /* ========================================================= CATEGORY ICON — SHARED CIRCLE ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category::before { content: "" !important; position: absolute !important; left: 16px !important; top: 50% !important; width: 40px !important; height: 40px !important; transform: translateY(-50%) !important; background-color: #090909 !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 21px 21px !important; border: 1px solid #5B4B12 !important; border-radius: 50% !important; box-shadow: none !important; box-sizing: border-box !important; } /* Hair Cut & Finish */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper + .booknetic_category_accordion > .booknetic_service_category::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.3 9.4L3.8 4.9M8.3 14.6L3.8 19.1M8.3 9.4L19.8 20.9M8.3 14.6L19.8 3.1' fill='none' stroke='%23FFD700' stroke-width='1.55' stroke-linecap='round'/%3E%3Ccircle cx='5.3' cy='3.9' r='2.1' fill='none' stroke='%23FFD700' stroke-width='1.4'/%3E%3Ccircle cx='5.3' cy='20.1' r='2.1' fill='none' stroke='%23FFD700' stroke-width='1.4'/%3E%3C/svg%3E") !important; } /* Hair Colour */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper + .booknetic_category_accordion + .booknetic_category_accordion > .booknetic_service_category::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18L17 7l2 2L8 20H4v-4l11-11 4 4' fill='none' stroke='%23FFD700' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M14 6l4 4' fill='none' stroke='%23FFD700' stroke-width='1.5'/%3E%3C/svg%3E") !important; } /* Treatments */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper + .booknetic_category_accordion + .booknetic_category_accordion + .booknetic_category_accordion > .booknetic_service_category::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20c5 0 8-3.5 8-8-3.6 0-6.3 1-8 3.5C10.3 13 7.6 12 4 12c0 4.5 3 8 8 8Z' fill='none' stroke='%23FFD700' stroke-width='1.45' stroke-linejoin='round'/%3E%3Cpath d='M12 15.5C12 10.5 10.6 7.4 8.5 4c4.2.3 6.4 3.1 6.8 6.6M12 15.5c0-4.1 2.1-6.8 5.4-8.4' fill='none' stroke='%23FFD700' stroke-width='1.45' stroke-linecap='round'/%3E%3C/svg%3E") !important; } /* Packages */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper + .booknetic_category_accordion + .booknetic_category_accordion + .booknetic_category_accordion + .booknetic_category_accordion > .booknetic_service_category::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='9' width='16' height='11' rx='1' fill='none' stroke='%23FFD700' stroke-width='1.45'/%3E%3Cpath d='M3 9h18v-3H3v3ZM12 6v14M8.3 6C6.5 5.9 5.5 5 5.5 3.9c0-1 1-1.7 2-1.4 1.8.6 3 2.2 4.5 3.5M15.7 6c1.8-.1 2.8-1 2.8-2.1 0-1-1-1.7-2-1.4-1.8.6-3 2.2-4.5 3.5' fill='none' stroke='%23FFD700' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* ========================================================= CATEGORY SUBTITLES ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category::after { position: absolute !important; left: 74px !important; right: 54px !important; bottom: 12px !important; color: #858585 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; pointer-events: none !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper + .booknetic_category_accordion > .booknetic_service_category::after { content: "Precision cutting and personalised finishing" !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper + .booknetic_category_accordion + .booknetic_category_accordion > .booknetic_service_category::after { content: "Glossing, tinting and bespoke colour services" !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper + .booknetic_category_accordion + .booknetic_category_accordion + .booknetic_category_accordion > .booknetic_service_category::after { content: "Moisture, protein and restorative care" !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper + .booknetic_category_accordion + .booknetic_category_accordion + .booknetic_category_accordion + .booknetic_category_accordion > .booknetic_service_category::after { content: "Curated appointment bundles and value options" !important; } /* ========================================================= CATEGORY ARROW ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span { position: absolute !important; top: 50% !important; right: 15px !important; width: 29px !important; height: 29px !important; transform: translateY(-50%) !important; background: #080808 !important; border: 1px solid #454545 !important; border-radius: 50% !important; box-sizing: border-box !important; transition: border-color .2s ease, background-color .2s ease !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span::before { content: "" !important; position: absolute !important; left: 10px !important; top: 8px !important; width: 6px !important; height: 6px !important; border-top: 1.5px solid #D5D5D5 !important; border-right: 1.5px solid #D5D5D5 !important; transform: rotate(45deg) !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category:hover > span, #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active > .booknetic_service_category > span { background: #0D0D0D !important; border-color: #FFD700 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category:hover > span::before, #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active > .booknetic_service_category > span::before { border-color: #FFD700 !important; } /* ========================================================= EXPANDED SERVICE CARDS Keep the established Booknetic structure but visually tie the service choices into the new category treatment. ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card { margin: 9px 0 !important; padding: 16px !important; background: #070707 !important; border-color: #2D2D2D !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card:hover { background: #0A0A0A !important; border-color: #555555 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card.booknetic_service_card_selected { background: #0A0A0A !important; border-color: #FFD700 !important; } /* ========================================================= PORTRAIT MOBILE ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container_body { padding: 14px 14px 16px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_input { height: 44px !important; font-size: 12px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category { min-height: 67px !important; padding: 13px 47px 25px 64px !important; font-size: 13px !important; line-height: 18px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category::before { left: 12px !important; width: 38px !important; height: 38px !important; background-size: 19px 19px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category::after { left: 64px !important; right: 45px !important; bottom: 10px !important; font-size: 9px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span { right: 10px !important; width: 27px !important; height: 27px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span::before { left: 9px !important; top: 7px !important; } } /* ========================================================= SHORT LANDSCAPE PHONE Compact, tidy and scroll-friendly. ========================================================= */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container_body { padding: 10px 14px 12px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper { margin-bottom: 10px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_input { height: 38px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion { margin-bottom: 6px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category { min-height: 54px !important; padding: 9px 44px 20px 57px !important; font-size: 12px !important; line-height: 16px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category::before { left: 10px !important; width: 34px !important; height: 34px !important; background-size: 17px 17px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category::after { left: 57px !important; right: 42px !important; bottom: 8px !important; font-size: 8px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span { right: 9px !important; width: 25px !important; height: 25px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span::before { left: 8px !important; top: 6px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V5 — SERVICE ICON / CHEVRON FIX - replaces the Hair Colour pencil-like icon with a proper tint / colour brush - completely replaces Booknetic's native category arrow so it cannot distort when an accordion is opened ========================================================= */ /* ========================================================= HAIR COLOUR — PROPER TINT BRUSH ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper + .booknetic_category_accordion + .booknetic_category_accordion > .booknetic_service_category::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3.5h10l-1 6.5H8L7 3.5Z' fill='none' stroke='%23FFD700' stroke-width='1.45' stroke-linejoin='round'/%3E%3Cpath d='M8.4 6h7.2M8.1 8h7.8M10 10h4v3.2l-1.1 1.6V21h-1.8v-6.2L10 13.2V10Z' fill='none' stroke='%23FFD700' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* ========================================================= CATEGORY CHEVRONS — FULL RESET Remove Booknetic's original border/rotation arrow and draw our own SVG so open/closed states remain perfectly clean. ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span { position: absolute !important; top: 50% !important; right: 15px !important; width: 29px !important; height: 29px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; background-color: #080808 !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 8px 12px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1.5 6 6l-4.5 4.5' fill='none' stroke='%23D5D5D5' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; border: 1px solid #454545 !important; border-radius: 50% !important; box-shadow: none !important; outline: 0 !important; box-sizing: border-box !important; overflow: hidden !important; transition: background-color .2s ease, border-color .2s ease !important; } /* Kill Booknetic's own chevron drawing completely */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span::before, #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span::after { content: none !important; display: none !important; border: 0 !important; width: 0 !important; height: 0 !important; transform: none !important; } /* Closed category hover */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category:hover > span { transform: translateY(-50%) !important; background-color: #0D0D0D !important; border-color: #FFD700 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1.5 6 6l-4.5 4.5' fill='none' stroke='%23FFD700' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* Open category — tidy downward chevron */ #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active > .booknetic_service_category > span { transform: translateY(-50%) !important; background-color: #0D0D0D !important; border-color: #FFD700 !important; background-size: 12px 8px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1.5 1.5 4.5 4.5 4.5-4.5' fill='none' stroke='%23FFD700' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* ========================================================= MOBILE CHEVRON POSITIONING ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span { right: 10px !important; width: 27px !important; height: 27px !important; } } @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span { right: 9px !important; width: 25px !important; height: 25px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V6 — SERVICE CHEVRON + SEARCH ICON FIX - completely hides Booknetic's native accordion arrow - draws our own clean chevron on the category card itself - closed = right chevron - open = down chevron - raises the search icon slightly for optical alignment ========================================================= */ /* ========================================================= SEARCH ICON — OPTICAL ALIGNMENT ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper::before { top: calc(50% - 2px) !important; transform: translateY(-50%) !important; } /* ========================================================= CHEVRON — REMOVE BOOKNETIC'S OWN ARROW COMPLETELY ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; overflow: hidden !important; } /* ========================================================= CLOSED CATEGORY — RIGHT CHEVRON Drawn as part of the category background, so Booknetic cannot rotate or distort it. ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category { background-color: #050505 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='m2 2 6 6-6 6' fill='none' stroke='%23D8D8D8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 19px center !important; background-size: 10px 16px !important; } /* Hover */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category:hover { background-color: #090909 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='m2 2 6 6-6 6' fill='none' stroke='%23FFD700' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* ========================================================= OPEN CATEGORY — DOWN CHEVRON ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active > .booknetic_service_category { background-color: #090909 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='m2 2 6 6 6-6' fill='none' stroke='%23FFD700' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-position: right 16px center !important; background-size: 16px 10px !important; } /* ========================================================= PORTRAIT MOBILE ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category { background-position: right 14px center !important; background-size: 9px 14px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active > .booknetic_service_category { background-position: right 12px center !important; background-size: 14px 9px !important; } } /* ========================================================= SHORT LANDSCAPE PHONE ========================================================= */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category { background-position: right 13px center !important; background-size: 8px 13px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active > .booknetic_service_category { background-position: right 11px center !important; background-size: 13px 8px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V7 — DEFINITIVE SERVICE CHEVRON FIX V6's chevron was drawn as a background on the whole category row. On this Booknetic build that background is being tiled by the accordion state, creating repeated arrows across the row. V7 removes the row background image entirely and rebuilds the existing arrow element from scratch inside a fixed circular control. ========================================================= */ /* ========================================================= CATEGORY ROW — NO CHEVRON BACKGROUND ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category, #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category:hover, #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active > .booknetic_service_category { background-image: none !important; background-repeat: no-repeat !important; background-position: initial !important; background-size: auto !important; } /* Restore the intended row colours */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category { background-color: #050505 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category:hover, #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active > .booknetic_service_category { background-color: #090909 !important; } /* ========================================================= ARROW CONTROL — COMPLETE RESET ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span { all: unset !important; position: absolute !important; top: 50% !important; right: 15px !important; display: block !important; width: 29px !important; height: 29px !important; transform: translateY(-50%) !important; background-color: #080808 !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 8px 12px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1.5 6 6l-4.5 4.5' fill='none' stroke='%23D8D8D8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; border: 1px solid #454545 !important; border-radius: 50% !important; box-shadow: none !important; outline: none !important; box-sizing: border-box !important; overflow: hidden !important; pointer-events: none !important; z-index: 3 !important; } /* Kill every native arrow layer */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span::before, #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; border: 0 !important; background: none !important; transform: none !important; } /* ========================================================= HOVER — RIGHT CHEVRON IN GOLD ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category:hover > span { transform: translateY(-50%) !important; background-color: #0D0D0D !important; border-color: #FFD700 !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 8px 12px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1.5 6 6l-4.5 4.5' fill='none' stroke='%23FFD700' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* ========================================================= OPEN CATEGORY — DOWN CHEVRON IN GOLD ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active > .booknetic_service_category > span { transform: translateY(-50%) !important; background-color: #0D0D0D !important; border-color: #FFD700 !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 12px 8px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1.5 1.5 4.5 4.5 4.5-4.5' fill='none' stroke='%23FFD700' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* ========================================================= MOBILE ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span { right: 10px !important; width: 27px !important; height: 27px !important; } } /* ========================================================= SHORT LANDSCAPE PHONE ========================================================= */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category > span { right: 9px !important; width: 25px !important; height: 25px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V8 — CLOSED CATEGORY CHEVRON FIX V7 fixed the OPEN state correctly, but Booknetic still overrides the normal CLOSED arrow with its own white disc. This uses a more specific selector and a full background shorthand so the closed control cannot inherit that fill. ========================================================= */ /* CLOSED CATEGORY — definitive normal state */ #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion > .booknetic_service_category > span { position: absolute !important; top: 50% !important; right: 15px !important; display: block !important; width: 29px !important; height: 29px !important; min-width: 29px !important; min-height: 29px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; background: #080808 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1.5 6 6l-4.5 4.5' fill='none' stroke='%23D8D8D8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 12px no-repeat !important; color: transparent !important; border: 1px solid #454545 !important; border-radius: 50% !important; box-shadow: none !important; outline: 0 !important; font-size: 0 !important; line-height: 0 !important; box-sizing: border-box !important; overflow: hidden !important; opacity: 1 !important; z-index: 5 !important; pointer-events: none !important; } /* Remove any native icon/pseudo layer inside the control */ #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion > .booknetic_service_category > span::before, #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion > .booknetic_service_category > span::after { content: none !important; display: none !important; } /* CLOSED HOVER */ #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion:not(.active) > .booknetic_service_category:hover > span { background: #0D0D0D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1.5 6 6l-4.5 4.5' fill='none' stroke='%23FFD700' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 12px no-repeat !important; border-color: #FFD700 !important; } /* OPEN — retain the working V7 down-chevron */ #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active > .booknetic_service_category > span { background: #0D0D0D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1.5 1.5 4.5 4.5 4.5-4.5' fill='none' stroke='%23FFD700' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 8px no-repeat !important; border-color: #FFD700 !important; transform: translateY(-50%) !important; } /* PORTRAIT MOBILE */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion > .booknetic_service_category > span { right: 10px !important; width: 27px !important; height: 27px !important; min-width: 27px !important; min-height: 27px !important; } } /* SHORT LANDSCAPE PHONE */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion > .booknetic_service_category > span { right: 9px !important; width: 25px !important; height: 25px !important; min-width: 25px !important; min-height: 25px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V9 — SERVICE MOBILE / LANDSCAPE POLISH Desktop stays unchanged. - raises the search icon further - tightens portrait-mobile service spacing - keeps category text readable without feeling oversized - makes landscape-phone rows more compact ========================================================= */ /* ========================================================= SEARCH ICON — FINAL OPTICAL POSITION ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper::before { top: calc(50% - 4px) !important; } /* ========================================================= PORTRAIT PHONE ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container_body { padding: 13px 12px 15px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper { margin-bottom: 12px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper::before { left: 13px !important; top: calc(50% - 4px) !important; width: 15px !important; height: 15px !important; background-size: 15px 15px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_input { height: 43px !important; padding-left: 40px !important; font-size: 11.5px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion { margin-bottom: 7px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category { min-height: 64px !important; padding: 12px 45px 24px 61px !important; font-size: 12.5px !important; line-height: 17px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category::before { left: 11px !important; width: 37px !important; height: 37px !important; background-size: 18px 18px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category::after { left: 61px !important; right: 43px !important; bottom: 9px !important; font-size: 8.8px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion > .booknetic_service_category > span { right: 9px !important; width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; } } /* ========================================================= LANDSCAPE PHONE ========================================================= */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container_body { padding: 9px 12px 11px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper { margin-bottom: 9px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper::before { left: 12px !important; top: calc(50% - 3px) !important; width: 14px !important; height: 14px !important; background-size: 14px 14px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_input { height: 36px !important; padding-left: 37px !important; font-size: 10.5px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion { margin-bottom: 5px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category { min-height: 50px !important; padding: 8px 40px 18px 53px !important; font-size: 11.5px !important; line-height: 15px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category::before { left: 9px !important; width: 32px !important; height: 32px !important; background-size: 16px 16px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_category::after { left: 53px !important; right: 39px !important; bottom: 7px !important; font-size: 7.8px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion > .booknetic_service_category > span { right: 8px !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V10 — SERVICE LIST SCROLL FIX V4 introduced overflow-y: visible on the Service body. That overrode the older Booknetic service scrolling rule, so an opened category could extend below the visible panel with no usable scroll area. V10 restores a dedicated scrollable Service body while keeping the header and footer in place. ========================================================= */ /* ========================================================= SERVICE STEP — SCROLLABLE CONTENT AREA ========================================================= */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container_body { height: auto !important; min-height: 0 !important; max-height: min(440px, 52vh) !important; overflow-y: auto !important; overflow-x: hidden !important; scroll-behavior: smooth !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; scrollbar-color: #555555 #080808 !important; } /* WebKit / Safari scrollbar */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container_body::-webkit-scrollbar { width: 5px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container_body::-webkit-scrollbar-track { background: #080808 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container_body::-webkit-scrollbar-thumb { background: #444444 !important; border-radius: 0 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container_body::-webkit-scrollbar-thumb:hover { background: #FFD700 !important; } /* ========================================================= SEARCH — KEEP IT AVAILABLE WHILE SERVICE LIST SCROLLS ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper { position: sticky !important; top: 0 !important; z-index: 20 !important; background: #000000 !important; padding-top: 1px !important; padding-bottom: 4px !important; } /* Final optical position for the search icon */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper::before { top: calc(50% - 6px) !important; } /* ========================================================= PORTRAIT PHONE ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container_body { max-height: 58dvh !important; max-height: 58vh !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper::before { top: calc(50% - 6px) !important; } } /* ========================================================= SHORT LANDSCAPE PHONE ========================================================= */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"] ) .booknetic_appointment_container_body { max-height: 48dvh !important; max-height: 48vh !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper::before { top: calc(50% - 5px) !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V11 — SERVICE CARD REWORK Refines the expanded service cards so they feel cleaner, more editorial, and easier to scan on desktop and phone. ========================================================= */ /* ========================================================= SERVICE CARD — DESKTOP / GLOBAL ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card { position: relative !important; margin: 12px 0 !important; padding: 18px 18px 16px !important; background: linear-gradient(180deg, #080808 0%, #050505 100%) !important; border: 1px solid #262626 !important; border-radius: 2px !important; box-shadow: none !important; overflow: hidden !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card:hover { background: linear-gradient(180deg, #0A0A0A 0%, #070707 100%) !important; border-color: #535353 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card.booknetic_service_card_selected { background: linear-gradient(180deg, #0A0A0A 0%, #070707 100%) !important; border-color: #FFD700 !important; } /* subtle left accent when selected */ #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card.booknetic_service_card_selected::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 2px !important; background: #FFD700 !important; } /* ========================================================= SERVICE CARD HEADER LAYOUT ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card_header { display: grid !important; grid-template-columns: 50px minmax(0, 1fr) auto !important; align-items: start !important; column-gap: 14px !important; row-gap: 6px !important; width: 100% !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card_image { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 50px !important; height: 50px !important; display: flex !important; align-items: center !important; justify-content: center !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_card_service_image { width: 46px !important; height: 46px !important; border-radius: 50% !important; border: 1px solid #5B4B12 !important; object-fit: cover !important; background: #0B0B0B !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card_title { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; padding-top: 1px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_title_span { display: block !important; color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: 0 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card_price { grid-column: 3 !important; grid-row: 1 / span 2 !important; align-self: start !important; margin-left: 0 !important; padding-left: 12px !important; padding-top: 2px !important; color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; text-align: right !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_free_badge, #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_free_badge * { color: #FFD700 !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; } /* ========================================================= SERVICE DESCRIPTION ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card_description { margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid #171717 !important; color: #A6A6A6 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 12px !important; line-height: 1.6 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card_description_fulltext, #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card_description_wrapped { color: #A6A6A6 !important; font-size: 12px !important; line-height: 1.6 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_view_more_service_notes_button, #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_view_less_service_notes_button { margin-top: 8px !important; color: #FFD700 !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none !important; letter-spacing: .03em !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_view_more_service_notes_button:hover, #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_view_less_service_notes_button:hover { color: #FFFFFF !important; } /* ========================================================= TIGHTER SPACING BETWEEN OPENED CARD SETS ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card:first-of-type { margin-top: 10px !important; } /* ========================================================= PORTRAIT MOBILE ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card { margin: 10px 0 !important; padding: 14px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card_header { grid-template-columns: 42px minmax(0, 1fr) auto !important; column-gap: 10px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card_image { width: 42px !important; height: 42px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_card_service_image { width: 38px !important; height: 38px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_title_span { font-size: 15px !important; line-height: 1.25 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card_price { font-size: 18px !important; padding-left: 8px !important; padding-top: 1px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_free_badge, #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_free_badge * { font-size: 15px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card_description, #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card_description_fulltext, #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card_description_wrapped { font-size: 11px !important; line-height: 1.55 !important; } } /* ========================================================= SHORT LANDSCAPE PHONE / SMALL LAPTOP HEIGHT ========================================================= */ @media screen and (orientation: landscape) and (max-height: 700px) { #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card { padding: 14px 15px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_title_span { font-size: 15px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_service_card_price { font-size: 18px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V12 — EXACT SERVICE CARD MARKUP FIX Built against the confirmed Booknetic service-card DOM: .booknetic_service_card .booknetic_service_card_header .booknetic_service_card_image .booknetic_service_card_title .booknetic_service_title_span .booknetic_service_duration_wrapper .booknetic_service_card_price .booknetic_service_card_description This replaces the previous grid assumptions and lets Booknetic control Show more / Show less visibility again. ========================================================= */ /* ========================================================= SERVICE CARD SHELL ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card { position: relative !important; width: 100% !important; margin: 10px 0 !important; padding: 16px 18px 15px !important; background: #070707 !important; border: 1px solid #292929 !important; border-radius: 2px !important; box-shadow: none !important; box-sizing: border-box !important; overflow: hidden !important; transition: background-color .18s ease, border-color .18s ease !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card:hover { background: #0A0A0A !important; border-color: #4A4A4A !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card.booknetic_service_card_selected { background: #0A0A0A !important; border-color: #FFD700 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card.booknetic_service_card_selected::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 2px !important; background: #FFD700 !important; } /* ========================================================= HEADER ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_header { display: grid !important; grid-template-columns: 50px minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 14px !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* IMAGE */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_image { grid-column: 1 !important; width: 50px !important; height: 50px !important; min-width: 50px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_card_service_image { display: block !important; width: 46px !important; height: 46px !important; margin: 0 !important; object-fit: cover !important; border: 1px solid #5B4B12 !important; border-radius: 50% !important; background: #0A0A0A !important; } /* TITLE + DURATION */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_title { grid-column: 2 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_title_span { display: block !important; width: 100% !important; color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: 0 !important; white-space: normal !important; overflow-wrap: break-word !important; } /* PRICE */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_price { grid-column: 3 !important; align-self: start !important; margin: 1px 0 0 14px !important; padding: 0 !important; color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap !important; text-align: right !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_price.booknetic_free_badge, #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_price.booknetic_free_badge * { color: #FFD700 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: none !important; } /* ========================================================= DESCRIPTION ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_description { display: block !important; width: 100% !important; margin: 13px 0 0 !important; padding: 12px 0 0 !important; border-top: 1px solid #1B1B1B !important; color: #A7A7A7 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.55 !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_description_fulltext, #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_description_wrapped { color: #A7A7A7 !important; font-size: inherit !important; line-height: inherit !important; } /* IMPORTANT: Do not force display on these. Booknetic's own JS decides which one is visible, so Show more / Show less work properly. */ #booknetic_theme_8 [data-step-id="service"] .booknetic_view_more_service_notes_button, #booknetic_theme_8 [data-step-id="service"] .booknetic_view_less_service_notes_button { margin-top: 7px !important; color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .02em !important; text-decoration: none !important; cursor: pointer !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_view_more_service_notes_button:hover, #booknetic_theme_8 [data-step-id="service"] .booknetic_view_less_service_notes_button:hover { color: #FFFFFF !important; } /* ========================================================= PORTRAIT PHONE ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card { padding: 14px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_header { grid-template-columns: 44px minmax(0, 1fr) auto !important; column-gap: 10px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_image { width: 44px !important; height: 44px !important; min-width: 44px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_card_service_image { width: 40px !important; height: 40px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_title_span { font-size: 13.5px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_price { margin-left: 8px !important; font-size: 15px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_price.booknetic_free_badge, #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_price.booknetic_free_badge * { font-size: 12px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_description { margin-top: 11px !important; padding-top: 10px !important; font-size: 10.5px !important; } } /* ========================================================= SHORT LANDSCAPE PHONE ========================================================= */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card { padding: 12px 14px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_header { grid-template-columns: 40px minmax(0, 1fr) auto !important; column-gap: 9px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_image { width: 40px !important; height: 40px !important; min-width: 40px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_card_service_image { width: 36px !important; height: 36px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_title_span { font-size: 12.5px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_price { font-size: 14px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_card_description { margin-top: 9px !important; padding-top: 8px !important; font-size: 9.5px !important; line-height: 1.45 !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V13 — SERVICE CARD REFINEMENT + PACKAGE CARDS ========================================================= */ /* --------------------------------------------------------- SERVICE CARD — DURATION PILL WITH CLOCK ICON --------------------------------------------------------- */ /* --------------------------------------------------------- PACKAGE CARDS — DISTINCT LOOK FROM SERVICES --------------------------------------------------------- */ #booknetic_theme_8 .booknetic_package_card { position: relative !important; background: linear-gradient(180deg, #070707 0%, #050505 100%) !important; border: 1px solid #3A3110 !important; border-radius: 2px !important; margin-bottom: 14px !important; padding: 18px 18px 16px !important; box-shadow: none !important; transition: border-color .18s ease, background-color .18s ease !important; overflow: hidden !important; } #booknetic_theme_8 .booknetic_package_card::before { content: "PACKAGE" !important; position: absolute !important; top: 12px !important; right: 14px !important; color: #7E7E7E !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: .18em !important; line-height: 1 !important; } #booknetic_theme_8 .booknetic_package_card:hover { background: linear-gradient(180deg, #0A0A0A 0%, #060606 100%) !important; border-color: #8E7620 !important; } #booknetic_theme_8 .booknetic_package_card.booknetic_package_card_selected, #booknetic_theme_8 .booknetic_package_card.booknetic_card_selected { border-color: #FFD700 !important; background: linear-gradient(180deg, #0B0B0B 0%, #070707 100%) !important; } #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_title, #booknetic_theme_8 .booknetic_package_card .booknetic_package_title { margin: 0 0 10px !important; } #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_title > span:first-child, #booknetic_theme_8 .booknetic_package_card .booknetic_package_title > span:first-child { display: block !important; color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: 0 !important; word-break: break-word !important; } #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_description, #booknetic_theme_8 .booknetic_package_card .booknetic_package_description { margin-top: 10px !important; padding-top: 11px !important; border-top: 1px solid #1D1D1D !important; color: #A7A7A7 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 11px !important; line-height: 1.55 !important; } #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_price, #booknetic_theme_8 .booknetic_package_card .booknetic_package_price, #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_prices, #booknetic_theme_8 .booknetic_package_card .booknetic_package_prices { color: #FFD700 !important; -webkit-text-fill-color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.2 !important; } #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_price del, #booknetic_theme_8 .booknetic_package_card .booknetic_package_price del, #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_prices del, #booknetic_theme_8 .booknetic_package_card .booknetic_package_prices del, #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_price s, #booknetic_theme_8 .booknetic_package_card .booknetic_package_price s, #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_prices s, #booknetic_theme_8 .booknetic_package_card .booknetic_package_prices s { color: #747474 !important; -webkit-text-fill-color: #747474 !important; font-size: 12px !important; font-weight: 400 !important; } #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_price ins, #booknetic_theme_8 .booknetic_package_card .booknetic_package_price ins, #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_prices ins, #booknetic_theme_8 .booknetic_package_card .booknetic_package_prices ins { color: #FFD700 !important; -webkit-text-fill-color: #FFD700 !important; font-size: 18px !important; font-weight: 700 !important; text-decoration: none !important; } #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_service_el { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid #141414 !important; } #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_service_el:first-of-type { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; } #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_service_el > span:first-child { color: #C8C8C8 !important; font-size: 12px !important; line-height: 1.45 !important; } #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_service_el > span:last-child { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 32px !important; padding: 3px 8px !important; border-radius: 999px !important; border: 1px solid #5B4B12 !important; background: transparent !important; color: #FFD700 !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; } @media only screen and (max-width: 767px) { #booknetic_theme_8 .booknetic_package_card { padding: 16px 14px 14px !important; } #booknetic_theme_8 .booknetic_package_card::before { top: 11px !important; right: 12px !important; font-size: 8px !important; } #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_title > span:first-child, #booknetic_theme_8 .booknetic_package_card .booknetic_package_title > span:first-child { font-size: 14px !important; } #booknetic_theme_8 .booknetic_package_card .booknetic_package_card_description, #booknetic_theme_8 .booknetic_package_card .booknetic_package_description { font-size: 10px !important; line-height: 1.5 !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V14 — DURATION + PACKAGE POLISH - larger duration pill - proper gold clock icon - removes the old clock pseudo-elements - restores breathing room above first package card - slightly refines package borders / spacing ========================================================= */ /* ========================================================= SERVICE DURATION — CLEAN GOLD CLOCK ========================================================= */ /* remove V13 hand-drawn clock layers */ /* ========================================================= PACKAGE CARDS — BREATHING ROOM + REFINEMENT ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card { margin: 14px 0 0 !important; padding: 20px 18px 17px !important; background: linear-gradient( 180deg, #080808 0%, #050505 100% ) !important; border: 1px solid #2D2D2D !important; } /* first package must not touch the category header */ #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion.active .booknetic_package_card:first-of-type { margin-top: 16px !important; } /* more restrained package identity */ #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card::before { top: 13px !important; right: 16px !important; color: #777777 !important; font-size: 8px !important; font-weight: 600 !important; letter-spacing: .20em !important; } /* cleaner hover / selected states */ #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card:hover { background: linear-gradient( 180deg, #0A0A0A 0%, #070707 100% ) !important; border-color: #5A4C20 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card.booknetic_package_card_selected, #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card.booknetic_card_selected { background: linear-gradient( 180deg, #0B0B0B 0%, #070707 100% ) !important; border-color: #FFD700 !important; } /* package title / price need a little more breathing room */ #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_title, #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_title { padding-right: 118px !important; margin-bottom: 12px !important; } /* description slightly softer */ #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_description, #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_description { color: #999999 !important; border-top-color: #1B1B1B !important; } /* included-service quantity pill */ #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_service_el > span:last-child { min-width: 34px !important; padding: 3px 9px !important; background: #0D0D0D !important; border-color: #5B4B12 !important; color: #FFD700 !important; } /* ========================================================= PORTRAIT MOBILE ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card { margin-top: 12px !important; padding: 18px 14px 15px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_title, #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_title { padding-right: 90px !important; } } /* ========================================================= SHORT LANDSCAPE PHONE ========================================================= */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card { margin-top: 10px !important; padding: 15px 13px 13px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V15 — DEFINITIVE GOLD CLOCK FIX V14 used the clock as a background image on the duration pill. On this Booknetic build that is being lost. V15 draws the clock on its own pseudo-element instead. ========================================================= */ /* GOLD CLOCK */ /* nothing else should draw over the clock */ /* PORTRAIT MOBILE */ @media only screen and (max-width: 767px) and (orientation: portrait) { } /* SHORT LANDSCAPE PHONE */ @media screen and (orientation: landscape) and (max-height: 600px) { } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V16 — DURATION PILL FINAL POSITIONING - larger duration pill - gold clock moved into a proper left-hand icon zone - more space between clock and time text - vertically centres both icon and text cleanly ========================================================= */ /* GOLD CLOCK */ /* ========================================================= PORTRAIT MOBILE ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { } /* ========================================================= SHORT LANDSCAPE PHONE ========================================================= */ @media screen and (orientation: landscape) and (max-height: 600px) { } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V17 — MOBILE PACKAGE TITLE CLIP FIX Booknetic's package add-on applies overflow:hidden to the package-title column below 1000px. Long package names can therefore lose their first/last line on portrait phones. V17 removes that clipping without changing desktop layout. ========================================================= */ @media only screen and (max-width: 767px) { #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card_header { align-items: flex-start !important; min-height: 0 !important; height: auto !important; overflow: visible !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_title, #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_title { height: auto !important; min-height: 50px !important; overflow: visible !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding-top: 8px !important; padding-bottom: 8px !important; padding-left: 0 !important; padding-right: 12px !important; margin-bottom: 8px !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_title > span:first-child, #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_title > span:first-child, #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_title_span { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; word-break: normal !important; overflow-wrap: anywhere !important; line-height: 1.32 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .dp-booknetic-package-subtitle { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; white-space: normal !important; line-height: 1.35 !important; margin-top: 3px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_price { align-self: flex-start !important; height: auto !important; padding-top: 8px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V19 — SERVICE DURATION PILL --------------------------------------------------------- Visible pill is drawn on the WRAPPER, not the inner span. ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_duration_wrapper { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; min-width: 68px !important; height: 24px !important; margin: 6px 0 0 !important; padding: 0 10px 0 31px !important; background: #111111 !important; background-image: none !important; border: 1px solid #3B3B3B !important; border-radius: 999px !important; box-shadow: none !important; box-sizing: border-box !important; white-space: nowrap !important; overflow: visible !important; line-height: 1 !important; flex: 0 0 auto !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_duration_wrapper::before { content: "" !important; position: absolute !important; display: block !important; left: 9px !important; top: 50% !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23FFD700' stroke-width='1.45'/%3E%3Cpath d='M8 4.6v3.7l2.7 1.6' fill='none' stroke='%23FFD700' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; pointer-events: none !important; z-index: 2 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_duration_wrapper .booknetic_service_duration_span { position: static !important; display: inline !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; color: #D8D8D8 !important; -webkit-text-fill-color: #D8D8D8 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: .02em !important; text-transform: none !important; text-align: left !important; white-space: nowrap !important; overflow: visible !important; transform: none !important; flex: 0 0 auto !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_duration_wrapper .booknetic_service_duration_span::before, #booknetic_theme_8 [data-step-id="service"] .booknetic_service_duration_wrapper .booknetic_service_duration_span::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; transform: none !important; } @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="service"] .booknetic_service_duration_wrapper { min-width: 64px !important; height: 23px !important; padding: 0 9px 0 29px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_duration_wrapper::before { left: 8px !important; width: 12px !important; height: 12px !important; background-size: 12px 12px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_duration_wrapper .booknetic_service_duration_span { font-size: 9.5px !important; } } @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8 [data-step-id="service"] .booknetic_service_duration_wrapper { min-width: 62px !important; height: 22px !important; padding: 0 8px 0 27px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_duration_wrapper::before { left: 7px !important; width: 11px !important; height: 11px !important; background-size: 11px 11px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_service_duration_wrapper .booknetic_service_duration_span { font-size: 9px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V20 — SERVICE EXTRAS DURATION PILL --------------------------------------------------------- The Subtitles plugin inserts a DIV after the service name, so the duration is no longer :nth-child(2). Correct target: span:nth-of-type(2) This restores the same duration-pill language used on the normal Service step without affecting the subtitle DIV. ========================================================= */ #booknetic_theme_8 [data-step-id="service_extras"] .booknetic_service_extra_card_title > span:nth-of-type(2) { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; min-width: 68px !important; max-width: none !important; height: 24px !important; min-height: 24px !important; margin: 6px 0 0 !important; padding: 0 10px 0 31px !important; background: #111111 !important; background-image: none !important; color: #D8D8D8 !important; -webkit-text-fill-color: #D8D8D8 !important; border: 1px solid #3B3B3B !important; border-radius: 999px !important; box-shadow: none !important; outline: 0 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: .02em !important; text-transform: none !important; text-align: left !important; white-space: nowrap !important; box-sizing: border-box !important; overflow: visible !important; flex: 0 0 auto !important; } #booknetic_theme_8 [data-step-id="service_extras"] .booknetic_service_extra_card_title > span:nth-of-type(2)::before { content: "" !important; position: absolute !important; display: block !important; left: 9px !important; top: 50% !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23FFD700' stroke-width='1.45'/%3E%3Cpath d='M8 4.6v3.7l2.7 1.6' fill='none' stroke='%23FFD700' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; pointer-events: none !important; z-index: 2 !important; } #booknetic_theme_8 [data-step-id="service_extras"] .booknetic_service_extra_card_title > span:nth-of-type(2)::after { content: none !important; display: none !important; } /* portrait mobile */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="service_extras"] .booknetic_service_extra_card_title > span:nth-of-type(2) { min-width: 64px !important; height: 23px !important; min-height: 23px !important; padding: 0 9px 0 29px !important; font-size: 9.5px !important; } #booknetic_theme_8 [data-step-id="service_extras"] .booknetic_service_extra_card_title > span:nth-of-type(2)::before { left: 8px !important; width: 12px !important; height: 12px !important; background-size: 12px 12px !important; } } /* short landscape phone */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8 [data-step-id="service_extras"] .booknetic_service_extra_card_title > span:nth-of-type(2) { min-width: 62px !important; height: 22px !important; min-height: 22px !important; padding: 0 8px 0 27px !important; font-size: 9px !important; } #booknetic_theme_8 [data-step-id="service_extras"] .booknetic_service_extra_card_title > span:nth-of-type(2)::before { left: 7px !important; width: 11px !important; height: 11px !important; background-size: 11px 11px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V21 — PACKAGE INCLUDED-SERVICE CLEANUP --------------------------------------------------------- Removes Booknetic's default blue/navy background from the service row inside package cards and restores the intended black / charcoal / gold visual language. ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_services { display: block !important; width: 100% !important; margin: 12px 0 0 !important; padding: 11px 0 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-top: 1px solid #1D1D1D !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_service_el { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_service_el > span:first-child { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #C8C8C8 !important; -webkit-text-fill-color: #C8C8C8 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.45 !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_service_el > span:last-child { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-width: 32px !important; height: auto !important; margin: 0 !important; padding: 3px 8px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 1px solid #5B4B12 !important; border-radius: 999px !important; box-shadow: none !important; color: #FFD700 !important; -webkit-text-fill-color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; } /* Portrait mobile */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_services { margin-top: 10px !important; padding-top: 9px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_service_el > span:first-child { font-size: 11px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_service_el > span:last-child { min-width: 30px !important; padding: 2px 7px !important; font-size: 10px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V22 — SERVICE SEARCH + PACKAGE INCLUDES --------------------------------------------------------- 1) Search bar now scrolls naturally with the Service step. It is no longer sticky/floating over cards beneath it. 2) Package included-service name and quantity are grouped together instead of being pushed to opposite edges. ========================================================= */ /* ========================================================= SERVICE SEARCH — REMOVE FLOATING / STICKY BEHAVIOUR ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; z-index: 1 !important; margin-top: 0 !important; background: #000000 !important; transform: none !important; } /* * Nothing in the Service step should be able to create a second * sticky search layer while the internal booking body scrolls. */ #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper[style] { position: relative !important; top: auto !important; } /* ========================================================= PACKAGE INCLUDED SERVICE — KEEP NAME + x4 TOGETHER ========================================================= */ #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_service_el { justify-content: flex-start !important; gap: 10px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_service_el > span:first-child { flex: 0 1 auto !important; width: auto !important; max-width: calc(100% - 52px) !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_service_el > span:last-child { margin-left: 0 !important; } /* Portrait mobile — slightly tighter grouping */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_service_el { gap: 8px !important; } #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_service_el > span:first-child { max-width: calc(100% - 46px) !important; } } /* Short landscape phone */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8 [data-step-id="service"] .booknetic_package_card .booknetic_package_card_service_el { gap: 8px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V23 — ADD TO CART REDESIGN --------------------------------------------------------- Step 6 only. - Full-width stacked appointment cards - Editorial service hierarchy - Compact metadata treatment - Refined more/edit/remove controls - Full-width Add Another Appointment action - Removes excessive empty panel height - Mobile + landscape refinements - Pairs with: DAMIAN-PHILPOTT-BOOKNETIC-ADD-TO-CART-V1.js ========================================================= */ /* ========================================================= STEP 6 — LET CONTENT CONTROL THE PANEL HEIGHT ========================================================= */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container_body, #booknetic_theme_8 .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] { height: auto !important; min-height: 0 !important; max-height: none !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container_body { overflow: visible !important; padding-bottom: 0 !important; } #booknetic_theme_8 .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] { overflow: visible !important; } /* ========================================================= CART HOLDER ========================================================= */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-holder { width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 18px 20px 16px !important; background: #000000 !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= STACK APPOINTMENTS — ONE FULL-WIDTH CARD PER ROW ========================================================= */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-col { display: block !important; flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* ========================================================= APPOINTMENT CARD ========================================================= */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 18px 20px 17px !important; background: linear-gradient( 180deg, #080808 0%, #050505 100% ) !important; color: #FFFFFF !important; border: 1px solid #2A2A2A !important; border-radius: 2px !important; outline: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; transition: background-color .2s ease, border-color .2s ease !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item:hover { background: linear-gradient( 180deg, #0A0A0A 0%, #060606 100% ) !important; border-color: #484848 !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item.active { background: linear-gradient( 180deg, #090909 0%, #050505 100% ) !important; border: 1px solid rgba(255, 215, 0, .58) !important; box-shadow: none !important; } /* Prevent any old rail decoration from returning */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item::before, #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item::after, #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-col::before, #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-col::after { content: none !important; display: none !important; } /* ========================================================= CARD HEADER ========================================================= */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-header { position: relative !important; display: grid !important; grid-template-columns: 56px minmax(0, 1fr) !important; align-items: center !important; column-gap: 14px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 128px 15px 0 !important; border-bottom: 1px solid #181818 !important; box-sizing: border-box !important; } /* If JS cannot find an image, remove the unused image column. */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item.dp-cart-no-image .booknetic-cart-item-header { grid-template-columns: minmax(0, 1fr) !important; } /* Service image inserted by the companion JS */ #booknetic_theme_8 [data-step-id="cart"] .dp-cart-service-media { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 56px !important; height: 56px !important; margin: 0 !important; background: #080808 !important; border: 1px solid #5B4B12 !important; border-radius: 50% !important; overflow: hidden !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-service-media img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; border: 0 !important; border-radius: 50% !important; } /* JS wraps Booknetic's real service title here */ #booknetic_theme_8 [data-step-id="cart"] .dp-cart-title-wrap { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item.dp-cart-no-image .dp-cart-title-wrap { grid-column: 1 !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-kicker { display: block !important; margin: 0 0 4px !important; padding: 0 !important; color: #8E8E8E !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-title-wrap > span:not(.dp-cart-kicker):not(.dp-cart-subtitle) { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.25 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-subtitle { display: block !important; max-width: 500px !important; margin: 4px 0 0 !important; padding: 0 !important; color: #9D9D9D !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.45 !important; white-space: normal !important; } /* ========================================================= THREE-DOT MENU ========================================================= */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more { position: absolute !important; top: 0 !important; right: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 50% !important; box-shadow: none !important; cursor: pointer !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more:hover { background: #111111 !important; border-color: #3A3A3A !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more img { display: block !important; width: 16px !important; height: 16px !important; filter: brightness(0) saturate(100%) invert(84%) sepia(100%) saturate(1568%) hue-rotate(359deg) brightness(104%) contrast(104%) !important; } /* ========================================================= EDIT / REMOVE MENU ========================================================= */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-btns { z-index: 50 !important; min-width: 124px !important; padding: 5px !important; background: #0B0B0B !important; border: 1px solid #333333 !important; border-radius: 2px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, .45) !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-edit, #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-remove { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: 100% !important; min-height: 34px !important; margin: 0 !important; padding: 7px 9px !important; background: transparent !important; border: 0 !important; border-radius: 2px !important; box-shadow: none !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; cursor: pointer !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-edit { color: #E2E2E2 !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-remove { color: #D86A70 !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-edit:hover, #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-remove:hover { background: #151515 !important; } /* ========================================================= APPOINTMENT META ========================================================= */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-body { position: relative !important; display: flex !important; align-items: flex-start !important; flex-wrap: wrap !important; gap: 12px 34px !important; width: auto !important; min-width: 0 !important; margin: 14px 0 0 70px !important; padding: 0 118px 0 0 !important; color: #D0D0D0 !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item.dp-cart-no-image .booknetic-cart-item-body { margin-left: 0 !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-body-row { display: flex !important; align-items: flex-start !important; flex-direction: column !important; gap: 3px !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-body-row > .booknetic-cart-item-body-cell:first-child { display: block !important; margin: 0 !important; padding: 0 !important; color: #777777 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .10em !important; text-transform: uppercase !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-body-row > .booknetic-cart-item-body-cell:nth-child(2) { display: block !important; margin: 0 !important; padding: 0 !important; color: #D7D7D7 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.35 !important; white-space: normal !important; } /* Date + Time is rebuilt by JS into two compact values */ #booknetic_theme_8 [data-step-id="cart"] .dp-cart-date-time-value { display: flex !important; align-items: flex-start !important; flex-wrap: wrap !important; gap: 10px 22px !important; min-width: 0 !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-date-part, #booknetic_theme_8 [data-step-id="cart"] .dp-cart-time-part { display: flex !important; flex-direction: column !important; gap: 3px !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-mini-label { color: #777777 !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .10em !important; text-transform: uppercase !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-mini-value { color: #D7D7D7 !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.35 !important; } /* Hide the old single "Date & Time:" label once JS has split it */ #booknetic_theme_8 [data-step-id="cart"] .dp-cart-date-row > .booknetic-cart-item-body-cell:first-child { display: none !important; } /* ========================================================= PRICE — TOP RIGHT, QUIETLY SEPARATED FROM THE MENU ========================================================= */ #booknetic_theme_8 [data-step-id="cart"] .dp-cart-amount-row { position: absolute !important; top: -68px !important; right: 38px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-amount-row > .booknetic-cart-item-body-cell:first-child { display: none !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-amount-row > .booknetic-cart-item-body-cell.amount { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: nowrap !important; } /* Info icon remains Booknetic's real button */ #booknetic_theme_8 [data-step-id="cart"] .dp-cart-amount-row .booknetic-cart-item-info { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 50% !important; cursor: pointer !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-amount-row .booknetic-cart-item-info img { width: 13px !important; height: 13px !important; } /* ========================================================= INFO POPOVER ========================================================= */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-info-details { z-index: 60 !important; min-width: 220px !important; max-width: 320px !important; margin-top: 8px !important; padding: 10px 12px !important; background: #0A0A0A !important; border: 1px solid #333333 !important; border-radius: 2px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, .45) !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-info-details-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-info-details-cell { font-size: 11px !important; line-height: 1.4 !important; } /* ========================================================= ADD ANOTHER APPOINTMENT ========================================================= */ #booknetic_theme_8 [data-step-id="cart"] .bkntc_again_booking { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; min-height: 44px !important; margin: 14px 0 0 !important; padding: 0 16px !important; background: #050505 !important; color: #FFD700 !important; border: 1px solid #5B4B12 !important; border-radius: 2px !important; box-shadow: none !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important; box-sizing: border-box !important; cursor: pointer !important; transition: background-color .2s ease, border-color .2s ease !important; } #booknetic_theme_8 [data-step-id="cart"] .bkntc_again_booking:hover { background: #0B0B0B !important; border-color: #FFD700 !important; } #booknetic_theme_8 [data-step-id="cart"] .bkntc_again_booking img { display: block !important; width: 24px !important; height: 24px !important; padding: 4px !important; background: #000000 !important; border: 1px solid #FFD700 !important; border-radius: 50% !important; box-sizing: border-box !important; } /* ========================================================= FOOTER — FOLLOW CONTENT ========================================================= */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container_footer { position: static !important; width: 100% !important; height: auto !important; min-height: 62px !important; margin: 0 !important; background: #050505 !important; border-top: 1px solid #151515 !important; box-sizing: border-box !important; } /* ========================================================= PORTRAIT MOBILE ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-holder { padding: 14px 14px 12px !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart { gap: 10px !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item { padding: 15px 14px 14px !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-header { grid-template-columns: 48px minmax(0, 1fr) !important; column-gap: 11px !important; padding-right: 70px !important; padding-bottom: 13px !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item.dp-cart-no-image .booknetic-cart-item-header { grid-template-columns: minmax(0, 1fr) !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-service-media { width: 48px !important; height: 48px !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-title-wrap > span:not(.dp-cart-kicker):not(.dp-cart-subtitle) { font-size: 15px !important; line-height: 1.25 !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-subtitle { margin-top: 3px !important; font-size: 10px !important; line-height: 1.4 !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-body, #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item.dp-cart-no-image .booknetic-cart-item-body { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 11px 16px !important; width: 100% !important; margin: 12px 0 0 !important; padding: 0 !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-date-row { grid-column: 1 / -1 !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-amount-row { position: absolute !important; top: -64px !important; right: 34px !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-amount-row > .booknetic-cart-item-body-cell.amount { font-size: 15px !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more { top: 0 !important; right: 0 !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-info-details { left: 0 !important; right: 0 !important; width: min(100%, 300px) !important; max-width: 100% !important; margin-top: 8px !important; transform: none !important; } #booknetic_theme_8 [data-step-id="cart"] .bkntc_again_booking { min-height: 46px !important; margin-top: 12px !important; } } /* ========================================================= SHORT LANDSCAPE PHONE ========================================================= */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-holder { padding: 12px 16px 10px !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart { gap: 9px !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item { padding: 13px 15px 12px !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-header { grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 10px !important; padding-right: 118px !important; padding-bottom: 10px !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-service-media { width: 44px !important; height: 44px !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-title-wrap > span:not(.dp-cart-kicker):not(.dp-cart-subtitle) { font-size: 14px !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-subtitle { font-size: 9px !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-body { margin: 10px 0 0 54px !important; padding-right: 110px !important; gap: 10px 22px !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item.dp-cart-no-image .booknetic-cart-item-body { margin-left: 0 !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-amount-row { top: -56px !important; right: 34px !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-amount-row > .booknetic-cart-item-body-cell.amount { font-size: 16px !important; } #booknetic_theme_8 [data-step-id="cart"] .bkntc_again_booking { min-height: 40px !important; margin-top: 10px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V24 — CART RAW-STATE SAFETY FIX --------------------------------------------------------- V23's enhanced cart layout uses classes added by the companion JavaScript. If that JavaScript has not loaded yet, Booknetic's original title must still remain full width and readable. This block prevents the raw title from being forced into the reserved image column and keeps the unenhanced meta layout tidy until JS enhancement is present. ========================================================= */ /* Raw Booknetic cart title: never squeeze it into the image column. */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item:not(.dp-cart-enhanced) .booknetic-cart-item-header { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 42px 15px 0 !important; border-bottom: 1px solid #181818 !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item:not(.dp-cart-enhanced) .booknetic-cart-item-header > span { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; overflow: visible !important; text-overflow: clip !important; } /* Raw meta state: remove V23's image-indent while JS is absent. */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item:not(.dp-cart-enhanced) .booknetic-cart-item-body { display: flex !important; align-items: flex-start !important; flex-wrap: wrap !important; gap: 12px 34px !important; width: 100% !important; min-width: 0 !important; margin: 14px 0 0 !important; padding: 0 !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item:not(.dp-cart-enhanced) .booknetic-cart-item-body-row { min-width: 0 !important; } /* Keep the real three-dot control clear of the title. */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item:not(.dp-cart-enhanced) .booknetic-cart-item-more { top: 0 !important; right: 0 !important; } @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item:not(.dp-cart-enhanced) .booknetic-cart-item-header { padding-right: 38px !important; padding-bottom: 13px !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item:not(.dp-cart-enhanced) .booknetic-cart-item-header > span { font-size: 15px !important; line-height: 1.3 !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item:not(.dp-cart-enhanced) .booknetic-cart-item-body { gap: 10px 22px !important; margin-top: 12px !important; } } @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item:not(.dp-cart-enhanced) .booknetic-cart-item-header { padding-right: 38px !important; padding-bottom: 11px !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item:not(.dp-cart-enhanced) .booknetic-cart-item-header > span { font-size: 14px !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item:not(.dp-cart-enhanced) .booknetic-cart-item-body { gap: 9px 22px !important; margin-top: 10px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V25 — ADD TO CART SCROLL FIX --------------------------------------------------------- V24 allowed the cart content to grow naturally, but Booknetic's outer booking shell still clips tall cart content. V25 therefore makes ONLY the Add to Cart body the scroll area. Header and footer remain in place, while all appointment cards and the "Add another appointment" button are reachable. ========================================================= */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; } /* The cart content itself becomes the scrolling region. */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container_body { height: auto !important; min-height: 0 !important; max-height: min(440px, 52vh) !important; overflow-y: auto !important; overflow-x: hidden !important; padding-bottom: 12px !important; scroll-behavior: smooth !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; scrollbar-color: #444444 #080808 !important; } /* Keep the active cart step itself natural height inside the scroll body. */ #booknetic_theme_8 .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* Footer remains outside the scrolling body. */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container_footer { position: relative !important; z-index: 20 !important; flex: 0 0 auto !important; width: 100% !important; min-height: 62px !important; background: #050505 !important; border-top: 1px solid #151515 !important; } /* Subtle WebKit scrollbar */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container_body::-webkit-scrollbar { width: 5px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container_body::-webkit-scrollbar-track { background: #080808 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container_body::-webkit-scrollbar-thumb { background: #444444 !important; border-radius: 999px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container_body::-webkit-scrollbar-thumb:hover { background: #FFD700 !important; } /* Portrait mobile gets a slightly taller usable body. */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container_body { max-height: 58dvh !important; max-height: 58vh !important; } } /* Short landscape phones need a shallower body. */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container_body { max-height: 48dvh !important; max-height: 48vh !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V26 — CART HOLDER SCROLL FIX --------------------------------------------------------- V25 put scrolling on .booknetic_appointment_container_body. In the Add to Cart state, Booknetic's tall content is actually governed by .booknetic-cart-holder, so the body scroll never reliably exposed the lower "Add another appointment" control. V26 makes the CART HOLDER itself the only scroll region. The Booknetic header/footer remain outside it and stay visible. ========================================================= */ /* --------------------------------------------------------- STEP STATE --------------------------------------------------------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container_body { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; padding-bottom: 0 !important; } /* --------------------------------------------------------- THE ACTUAL CART SCROLL REGION --------------------------------------------------------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-holder { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; /* * Enough room for a comfortable card view while still leaving * the Booknetic footer visible beneath it. */ max-height: min(360px, 48vh) !important; margin: 0 !important; padding: 18px 20px 18px !important; overflow-y: auto !important; overflow-x: hidden !important; scroll-behavior: smooth !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; scrollbar-color: #444444 #080808 !important; scrollbar-gutter: stable !important; box-sizing: border-box !important; } /* Cart/cards remain natural-height children inside the holder. */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-col, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-item { height: auto !important; min-height: 0 !important; max-height: none !important; } /* Make sure the Add Another Appointment action is part of the scrollable flow and cannot be clipped at the holder bottom. */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .bkntc_again_booking { position: relative !important; inset: auto !important; display: flex !important; width: 100% !important; max-width: 100% !important; margin: 14px 0 4px !important; flex: 0 0 auto !important; } /* --------------------------------------------------------- FOOTER — ALWAYS ACCESSIBLE BELOW THE CART HOLDER --------------------------------------------------------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic_appointment_container_footer { position: relative !important; z-index: 30 !important; display: flex !important; flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 62px !important; margin: 0 !important; background: #050505 !important; border-top: 1px solid #151515 !important; overflow: visible !important; } /* --------------------------------------------------------- SAFARI / WEBKIT SCROLLBAR --------------------------------------------------------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-holder::-webkit-scrollbar { width: 5px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-holder::-webkit-scrollbar-track { background: #080808 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-holder::-webkit-scrollbar-thumb { background: #444444 !important; border-radius: 999px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-holder::-webkit-scrollbar-thumb:hover { background: #FFD700 !important; } /* --------------------------------------------------------- PORTRAIT MOBILE --------------------------------------------------------- */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-holder { max-height: 54dvh !important; max-height: 54vh !important; padding: 14px 14px 18px !important; } } /* --------------------------------------------------------- SHORT LANDSCAPE PHONE --------------------------------------------------------- */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-holder { max-height: 44dvh !important; max-height: 44vh !important; padding: 12px 16px 16px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V27 — CART ACTION / POPOVER POLISH --------------------------------------------------------- Final refinements after the cart scroll fix: 1) Keep ADD ANOTHER APPOINTMENT in normal document flow, directly after the appointment stack. 2) Stop that action from floating across appointment cards. 3) Keep the price information popover inside the card instead of allowing it to escape to the upper-right of the panel. ========================================================= */ /* The scrolling holder is a straightforward vertical flow. */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-holder { display: block !important; } /* Appointment stack ends cleanly before the add-another action. */ #booknetic_theme_8 .booknetic-cart { position: relative !important; z-index: 1 !important; margin-bottom: 0 !important; } /* The JS places this immediately after .booknetic-cart. Force it to behave as an ordinary block in the scroll flow. */ #booknetic_theme_8 .booknetic-cart + .bkntc_again_booking, #booknetic_theme_8 .booknetic-cart-holder > .bkntc_again_booking { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; z-index: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; float: none !important; clear: both !important; width: 100% !important; max-width: 100% !important; min-height: 46px !important; margin: 14px 0 4px !important; padding: 0 16px !important; transform: none !important; background: #050505 !important; color: #FFD700 !important; border: 1px solid #5B4B12 !important; border-radius: 2px !important; box-shadow: none !important; box-sizing: border-box !important; } /* ========================================================= PRICE INFO POPOVER ========================================================= */ /* Give Booknetic's real info-control cell a positioning context. */ #booknetic_theme_8 .booknetic-cart-item-body-cell:has(.booknetic-cart-item-info) { position: relative !important; } /* Keep the popover tucked under the info icon and within the card. */ #booknetic_theme_8 .booknetic-cart-item-info-details { position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; bottom: auto !important; left: auto !important; z-index: 100 !important; width: 230px !important; min-width: 0 !important; max-width: min(230px, calc(100vw - 48px)) !important; margin: 0 !important; padding: 10px 12px !important; transform: none !important; background: #0A0A0A !important; border: 1px solid #333333 !important; border-radius: 2px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, .45) !important; box-sizing: border-box !important; } /* If Booknetic draws its little arrow separately, line it up with the right-hand info icon rather than the old plugin position. */ #booknetic_theme_8 .booknetic-cart-item-info-details-arrow { right: 5px !important; left: auto !important; transform: none !important; } /* Mobile: the popover uses the available card width. */ @media only screen and (max-width: 767px) { #booknetic_theme_8 .booknetic-cart-item-info-details { right: 0 !important; left: auto !important; width: min(220px, calc(100vw - 72px)) !important; max-width: min(220px, calc(100vw - 72px)) !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V28 — CART MENU + INFO ARROW POLISH --------------------------------------------------------- Final cart micro-polish: 1) EDIT action uses the Damian Philpott gold treatment. 2) Remove Booknetic's detached info arrow. 3) Draw a new arrow directly on the info popover so it is visually attached to the box. ========================================================= */ /* --------------------------------------------------------- EDIT / REMOVE ACTION MENU --------------------------------------------------------- */ #booknetic_theme_8 .booknetic-cart-item-btns .booknetic-cart-item-edit, #booknetic_theme_8 .booknetic-cart-item-btns .booknetic-cart-item-edit span { color: #FFD700 !important; opacity: 1 !important; } #booknetic_theme_8 .booknetic-cart-item-btns .booknetic-cart-item-edit:hover, #booknetic_theme_8 .booknetic-cart-item-btns .booknetic-cart-item-edit:hover span { color: #FFFFFF !important; } /* Keep REMOVE deliberately separate and muted red. */ #booknetic_theme_8 .booknetic-cart-item-btns .booknetic-cart-item-remove, #booknetic_theme_8 .booknetic-cart-item-btns .booknetic-cart-item-remove span { color: #C94A5F !important; } /* --------------------------------------------------------- PRICE INFO POPOVER ARROW --------------------------------------------------------- */ /* Hide Booknetic's original arrow because it is positioned from the info button rather than from the popup itself. */ #booknetic_theme_8 .booknetic-cart-item-info-details-arrow { display: none !important; } /* The popup itself becomes the positioning context. */ #booknetic_theme_8 .booknetic-cart-item-info-details { position: absolute !important; overflow: visible !important; } /* New arrow, physically attached to the popup top edge. */ #booknetic_theme_8 .booknetic-cart-item-info-details::before { content: "" !important; position: absolute !important; top: -5px !important; right: 14px !important; width: 9px !important; height: 9px !important; background: #0A0A0A !important; border-top: 1px solid #333333 !important; border-left: 1px solid #333333 !important; transform: rotate(45deg) !important; box-sizing: border-box !important; } /* Mobile: keep the arrow slightly further in from the edge. */ @media only screen and (max-width: 767px) { #booknetic_theme_8 .booknetic-cart-item-info-details::before { right: 12px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V29 — CART SERVICE EXTRAS --------------------------------------------------------- Companion styling for Add to Cart Enhancer V4. Selected Booknetic service extras are surfaced directly in the appointment card while the original info popup remains. ========================================================= */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras { display: flex !important; flex-direction: column !important; gap: 7px !important; flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; margin: 3px 0 0 !important; padding: 11px 0 0 !important; border-top: 1px solid #1C1C1C !important; box-sizing: border-box !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras-heading { margin: 0 !important; padding: 0 !important; color: #777777 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .10em !important; text-transform: uppercase !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-name-wrap { display: flex !important; align-items: center !important; gap: 7px !important; min-width: 0 !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-name { min-width: 0 !important; color: #CFCFCF !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.35 !important; white-space: normal !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-qty { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-width: 25px !important; height: 18px !important; padding: 0 6px !important; color: #FFD700 !important; background: #0E0E0E !important; border: 1px solid #5B4B12 !important; border-radius: 999px !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1 !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-price { flex: 0 0 auto !important; color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: nowrap !important; } @media only screen and (max-width: 767px) { #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras { gap: 6px !important; padding-top: 9px !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-row { gap: 10px !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-name, #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-price { font-size: 10px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V30 — CART SERVICE + EXTRA DURATIONS --------------------------------------------------------- Companion styling for Add to Cart Enhancer V5. Shows: - base service duration - each extra's added duration - calculated total appointment duration ========================================================= */ /* Main service duration — quiet gold pill beneath the subtitle. */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-service-duration { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: flex-start !important; min-width: 0 !important; height: 18px !important; margin: 5px 0 0 !important; padding: 0 7px !important; color: #FFD700 !important; background: #0E0E0E !important; border: 1px solid #5B4B12 !important; border-radius: 999px !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: .02em !important; white-space: nowrap !important; } /* Extra duration sits beside the extra name/quantity. */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-duration { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-width: 0 !important; height: 18px !important; padding: 0 6px !important; color: #AFAFAF !important; background: #0B0B0B !important; border: 1px solid #303030 !important; border-radius: 999px !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 9px !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap !important; } /* Calculated service + extras appointment time. */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-total-duration { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; width: 100% !important; margin: 3px 0 0 !important; padding: 9px 0 0 !important; border-top: 1px solid #1C1C1C !important; box-sizing: border-box !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-total-duration-label { color: #777777 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .10em !important; text-transform: uppercase !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-total-duration-value { color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: nowrap !important; } @media only screen and (max-width: 767px) { #booknetic_theme_8 .booknetic-cart-item .dp-cart-service-duration, #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-duration { height: 17px !important; font-size: 8px !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-name-wrap { flex-wrap: wrap !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-total-duration-value { font-size: 10px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V31 — COMPACT CART META + EXTRAS ACCORDION --------------------------------------------------------- Companion styling for Add to Cart Enhancer V6. Changes: - Removes the outlined box/pill around the main service time. - Date and time sit together on one compact row. - Extras become a compact accordion. - Accordion header shows count + combined extra price. - Total appointment duration remains visible even when extras are collapsed. ========================================================= */ /* --------------------------------------------------------- MAIN SERVICE DURATION — SIMPLE GOLD TEXT, NO BOX --------------------------------------------------------- */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-service-duration { display: inline-block !important; align-self: flex-start !important; width: auto !important; min-width: 0 !important; height: auto !important; margin: 4px 0 0 !important; padding: 0 !important; color: #FFD700 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .01em !important; white-space: nowrap !important; } /* --------------------------------------------------------- DATE + TIME — ONE CLEAN ROW --------------------------------------------------------- */ #booknetic_theme_8 [data-step-id="cart"] .dp-cart-date-time-value { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px 14px !important; width: 100% !important; min-width: 0 !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-date-part, #booknetic_theme_8 [data-step-id="cart"] .dp-cart-time-part { display: inline-flex !important; flex-direction: row !important; align-items: baseline !important; gap: 6px !important; min-width: 0 !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-date-part::after { content: "" !important; display: inline-block !important; width: 1px !important; height: 12px !important; margin-left: 7px !important; background: #333333 !important; vertical-align: middle !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-mini-label { display: none !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-mini-value { color: #D7D7D7 !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.3 !important; white-space: nowrap !important; } /* --------------------------------------------------------- EXTRAS ACCORDION SHELL --------------------------------------------------------- */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras { display: block !important; width: 100% !important; min-width: 0 !important; margin: 4px 0 0 !important; padding: 0 !important; border-top: 1px solid #1C1C1C !important; box-sizing: border-box !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras-toggle { appearance: none !important; -webkit-appearance: none !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; color: #D7D7D7 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; font-family: Helvetica, Arial, sans-serif !important; text-align: left !important; cursor: pointer !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras-toggle:hover { color: #FFFFFF !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras-toggle-title { display: inline-flex !important; align-items: center !important; gap: 7px !important; min-width: 0 !important; color: #CFCFCF !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras-toggle-title::before { content: "+" !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; color: #FFD700 !important; border: 1px solid #5B4B12 !important; border-radius: 50% !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1 !important; transition: transform .18s ease !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras.is-open .dp-cart-extras-toggle-title::before { transform: rotate(45deg) !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras-toggle-price { color: #FFD700 !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: nowrap !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras-chevron { position: relative !important; display: block !important; width: 9px !important; height: 9px !important; border-right: 1.5px solid #FFD700 !important; border-bottom: 1.5px solid #FFD700 !important; transform: rotate(45deg) translateY(-2px) !important; transform-origin: center !important; transition: transform .18s ease !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras.is-open .dp-cart-extras-chevron { transform: rotate(225deg) translate(-2px, -2px) !important; } /* --------------------------------------------------------- COLLAPSIBLE EXTRA CONTENT --------------------------------------------------------- */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras-content { display: none !important; padding: 3px 0 8px !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras.is-open .dp-cart-extras-content { display: block !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 5px 0 !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-name-wrap { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; min-width: 0 !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-name { color: #CFCFCF !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.35 !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-duration { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 17px !important; padding: 0 6px !important; color: #AFAFAF !important; background: #0B0B0B !important; border: 1px solid #303030 !important; border-radius: 999px !important; font-size: 8px !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-price { flex: 0 0 auto !important; color: #FFD700 !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: nowrap !important; } /* --------------------------------------------------------- TOTAL APPOINTMENT TIME — ALWAYS VISIBLE --------------------------------------------------------- */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-total-duration { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; width: 100% !important; margin: 0 !important; padding: 9px 0 0 !important; border-top: 1px solid #1C1C1C !important; box-sizing: border-box !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-total-duration-label { color: #777777 !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .10em !important; text-transform: uppercase !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-total-duration-value { color: #FFD700 !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: nowrap !important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media only screen and (max-width: 767px) { #booknetic_theme_8 .booknetic-cart-item .dp-cart-service-duration { font-size: 10px !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-date-time-value { gap: 5px 9px !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-date-part::after { margin-left: 4px !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-mini-value { font-size: 10px !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras-toggle { gap: 8px !important; min-height: 36px !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras-toggle-title, #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras-toggle-price { font-size: 9px !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extra-row { gap: 9px !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-total-duration-value { font-size: 10px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V32 — COMPACT STAFF / DATE / TIME META ROW --------------------------------------------------------- Companion styling for Add to Cart Enhancer V7. Changes: - Staff, date and time share one compact row. - Gold line icons replace the old text labels. - Original Booknetic staff/date rows remain in the DOM for stability but are hidden after V7 has copied their values. ========================================================= */ /* Hide only the original rows after V7 has safely copied them. */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-source-row-hidden { display: none !important; } /* --------------------------------------------------------- COMBINED META ROW --------------------------------------------------------- */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px 17px !important; width: 100% !important; min-width: 0 !important; margin: 8px 0 4px !important; padding: 9px 0 !important; border-top: 1px solid #1C1C1C !important; box-sizing: border-box !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-item { position: relative !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; color: #D7D7D7 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.25 !important; white-space: nowrap !important; } /* Subtle separators between the three compact facts. */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-item:not(:first-child)::before { content: "" !important; position: absolute !important; left: -9px !important; top: 50% !important; width: 1px !important; height: 12px !important; background: #2B2B2B !important; transform: translateY(-50%) !important; } /* --------------------------------------------------------- GOLD LINE ICONS --------------------------------------------------------- */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-icon { display: inline-block !important; flex: 0 0 14px !important; width: 14px !important; height: 14px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 14px !important; opacity: .95 !important; } /* Person */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-icon-staff { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFD700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important; } /* Calendar */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-icon-date { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFD700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") !important; } /* Clock */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-icon-time { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFD700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") !important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media only screen and (max-width: 767px) { #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-row { gap: 7px 13px !important; margin-top: 7px !important; padding: 8px 0 !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-item { gap: 5px !important; font-size: 9px !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-item:not(:first-child)::before { left: -7px !important; height: 10px !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-icon { flex-basis: 13px !important; width: 13px !important; height: 13px !important; background-size: 13px 13px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V33 — FINAL CART MICRO-POLISH --------------------------------------------------------- Companion styling for Add to Cart Enhancer V8. Changes: 1) Staff / date / time row is slightly brighter and larger. 2) Extras summary is cleaner and more editorial. 3) More bottom breathing room in the scrollable cart holder. 4) "TOTAL TIME" remains compact and clear. ========================================================= */ /* --------------------------------------------------------- STAFF / DATE / TIME — SLIGHTLY STRONGER --------------------------------------------------------- */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-item { color: #E2E2E2 !important; font-size: 11px !important; font-weight: 500 !important; } /* --------------------------------------------------------- EXTRAS SUMMARY — CLEANER --------------------------------------------------------- */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras-toggle-title { color: #D8D8D8 !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-extras-toggle-price { color: #FFD700 !important; font-weight: 600 !important; } /* --------------------------------------------------------- SCROLL CLEARANCE --------------------------------------------------------- Gives the last appointment and ADD ANOTHER APPOINTMENT enough room to scroll fully above the fixed Back / Next footer. --------------------------------------------------------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-holder { padding-bottom: 42px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .bkntc_again_booking { margin-bottom: 10px !important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media only screen and (max-width: 767px) { #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-item { color: #E2E2E2 !important; font-size: 10px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-holder { padding-bottom: 34px !important; } } /* --------------------------------------------------------- SHORT LANDSCAPE PHONE --------------------------------------------------------- */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-holder { padding-bottom: 30px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V34 — MOBILE CART PRICE ANCHOR FIX --------------------------------------------------------- Portrait-mobile only. Fix: - A long / wrapped service name no longer pushes the price lower down the card. - Price + info icon are anchored to the appointment card, rather than being positioned from the start of the body. - Extra right-hand header space keeps long titles/subtitles clear of the fixed price and three-dot menu. ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { /* Reserve a permanent right-hand price/menu column. */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-header { padding-right: 122px !important; } /* The body must not be the positioning reference for price. */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-body, #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item.dp-cart-no-image .booknetic-cart-item-body { position: static !important; } /* Keep price at a consistent height regardless of title wrapping. */ #booknetic_theme_8 [data-step-id="cart"] .dp-cart-amount-row { position: absolute !important; top: 42px !important; right: 47px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; z-index: 4 !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-amount-row > .booknetic-cart-item-body-cell.amount { font-size: 15px !important; line-height: 1.15 !important; } /* Keep the menu slightly above and to the far right. */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more { top: 13px !important; right: 12px !important; z-index: 5 !important; } /* Long titles may wrap, but remain in their own safe column. */ #booknetic_theme_8 [data-step-id="cart"] .dp-cart-title-wrap { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #booknetic_theme_8 [data-step-id="cart"] .dp-cart-title-wrap > span:not(.dp-cart-kicker):not(.dp-cart-subtitle):not(.dp-cart-service-duration) { max-width: 100% !important; overflow-wrap: normal !important; word-break: normal !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V35 — MOBILE META SINGLE-LINE FIX --------------------------------------------------------- Portrait-mobile only. Keeps: Staff • Date • Time on one single horizontal line. No JS change required. ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-row { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 0 !important; width: 100% !important; min-width: 0 !important; overflow: visible !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-item { display: inline-flex !important; align-items: center !important; flex: 0 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 8px !important; font-size: 9px !important; line-height: 1.2 !important; white-space: nowrap !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-item:first-child { padding-left: 0 !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-item:last-child { padding-right: 0 !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-icon { flex: 0 0 11px !important; width: 11px !important; height: 11px !important; margin-right: 4px !important; background-size: 11px 11px !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-value { min-width: 0 !important; white-space: nowrap !important; } /* Neater compact separators. */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-item:not(:first-child)::before { left: 0 !important; height: 10px !important; background: #333333 !important; } } /* Very narrow phones: tighten only slightly rather than stack. */ @media only screen and (max-width: 380px) and (orientation: portrait) { #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-item { padding-left: 5px !important; padding-right: 5px !important; font-size: 8.5px !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-icon { flex-basis: 10px !important; width: 10px !important; height: 10px !important; margin-right: 3px !important; background-size: 10px 10px !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V36 — MOBILE CART META / MENU / INFO FIX --------------------------------------------------------- Portrait-mobile polish only. Changes: 1) Staff gets its own first line. 2) Date + time sit together on the second line. 3) Three-dot menu uses clean CSS-drawn #FFD700 dots. 4) Price info popup is forced to a proper horizontal width, overriding older high-specificity Booknetic/cart rules. ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { /* ----------------------------------------------------- META: STAFF LINE 1 / DATE + TIME LINE 2 ----------------------------------------------------- */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-row { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; column-gap: 0 !important; row-gap: 8px !important; width: 100% !important; min-width: 0 !important; overflow: visible !important; } /* Staff occupies the whole first row. */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-staff { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; } /* Date + time share row two. */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-date, #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-time { flex: 0 0 auto !important; width: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 10px !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-date { padding-left: 0 !important; padding-right: 10px !important; } #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-time { padding-left: 10px !important; padding-right: 0 !important; } /* No divider before DATE because it starts the second row. */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-date::before { display: none !important; } /* Keep a subtle divider only between DATE and TIME. */ #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-time::before { display: block !important; left: 0 !important; height: 11px !important; background: #333333 !important; } /* ----------------------------------------------------- THREE-DOT MENU — EXACT GOLD, NO IMAGE FILTER ----------------------------------------------------- */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more { color: #FFD700 !important; background: transparent !important; border-color: transparent !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more img { display: none !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more::before { content: "" !important; display: block !important; width: 3px !important; height: 3px !important; background: #FFD700 !important; border-radius: 50% !important; box-shadow: 0 -5px 0 #FFD700, 0 5px 0 #FFD700 !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more:hover::before { background: #FFFFFF !important; box-shadow: 0 -5px 0 #FFFFFF, 0 5px 0 #FFFFFF !important; } /* ----------------------------------------------------- PRICE INFO POPUP — HORIZONTAL / READABLE ----------------------------------------------------- These selectors deliberately match/exceed the old :has(...) specificity that was collapsing the popup to the width of the tiny info-icon cell. ----------------------------------------------------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-item .booknetic-cart-item-info-details { position: absolute !important; top: calc(100% + 9px) !important; right: 0 !important; bottom: auto !important; left: auto !important; z-index: 200 !important; width: min(270px, calc(100vw - 72px)) !important; min-width: min(220px, calc(100vw - 72px)) !important; max-width: min(270px, calc(100vw - 72px)) !important; margin: 0 !important; padding: 10px 12px !important; overflow: visible !important; transform: none !important; background: #0A0A0A !important; border: 1px solid #333333 !important; border-radius: 2px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, .50) !important; box-sizing: border-box !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-item .booknetic-cart-item-info-details-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-item .booknetic-cart-item-info-details-cell:first-child { min-width: 0 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; color: #D7D7D7 !important; font-size: 10px !important; line-height: 1.35 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-item .booknetic-cart-item-info-details-cell:last-child { min-width: max-content !important; white-space: nowrap !important; color: #FFD700 !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.35 !important; } /* Keep the replacement popup arrow attached to the box. */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-item .booknetic-cart-item-info-details::before { top: -5px !important; right: 10px !important; } } /* Very narrow phones: retain the two-line meta layout. */ @media only screen and (max-width: 380px) and (orientation: portrait) { #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-staff, #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-date, #booknetic_theme_8 .booknetic-cart-item .dp-cart-meta-time { font-size: 9px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="cart"] ) .booknetic-cart-item .booknetic-cart-item-info-details { width: calc(100vw - 64px) !important; min-width: 0 !important; max-width: calc(100vw - 64px) !important; } } /* ========================================================= DAMIAN PHILPOTT BOOKNETIC MASTER V37 — MOBILE THREE-DOT TOUCH FIX --------------------------------------------------------- The V36 visual dots were drawn with ::before while the original Booknetic was display:none. On mobile, Booknetic can attach/resolve the menu action through the original image/button structure. V37 keeps the original image present and tappable, but makes it invisible underneath our exact #FFD700 CSS dots. ========================================================= */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-header { overflow: visible !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more { position: absolute !important; top: 13px !important; right: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 50% !important; z-index: 80 !important; pointer-events: auto !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } /* * IMPORTANT: * Keep Booknetic's original image in the hit area. * opacity:0 preserves it for its own click handling. */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more img { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: auto !important; z-index: 2 !important; } /* Visible replacement dots must not intercept the tap. */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 3px !important; height: 3px !important; margin: 0 !important; background: #FFD700 !important; border-radius: 50% !important; box-shadow: 0 -5px 0 #FFD700, 0 5px 0 #FFD700 !important; transform: translate(-50%, -50%) !important; pointer-events: none !important; z-index: 3 !important; } #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more:hover::before, #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more:focus::before, #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-more:active::before { background: #FFD700 !important; box-shadow: 0 -5px 0 #FFD700, 0 5px 0 #FFD700 !important; } /* Make sure the Booknetic action menu can sit above the card. */ #booknetic_theme_8 [data-step-id="cart"] .booknetic-cart-item-btns { z-index: 300 !important; min-width: 126px !important; white-space: nowrap !important; } } /* ========================================= MOBILE TIDY-UP - move 3-dot menu slightly inward - give info box icon/text more space ========================================= */ @media (max-width: 767px) { /* 3-dot menu button */ .booknetic-cart .booknetic-cart-item-more, .booknetic-cart .dp-cart-more, .booknetic_appointment_container .booknetic-cart-item-more { right: 14px !important; top: 14px !important; } .booknetic-cart .booknetic-cart-item-more img, .booknetic-cart .dp-cart-more img, .booknetic_appointment_container .booknetic-cart-item-more img { display: block !important; } /* info / notice box */ .booknetic_appointment_container .booknetic_information_box, .booknetic_appointment_container .bkntc_information_box, .booknetic_appointment_container .booknetic_notice, .booknetic_appointment_container .dp-info-box { padding: 22px 18px 20px 22px !important; } /* title + text spacing away from yellow line */ .booknetic_appointment_container .booknetic_information_box *, .booknetic_appointment_container .bkntc_information_box *, .booknetic_appointment_container .booknetic_notice *, .booknetic_appointment_container .dp-info-box * { box-sizing: border-box; } .booknetic_appointment_container .booknetic_information_box .booknetic_information_box_title, .booknetic_appointment_container .bkntc_information_box .booknetic_information_box_title, .booknetic_appointment_container .booknetic_notice .booknetic_information_box_title, .booknetic_appointment_container .dp-info-box .booknetic_information_box_title { padding-left: 10px !important; margin-left: 0 !important; } .booknetic_appointment_container .booknetic_information_box p, .booknetic_appointment_container .booknetic_information_box .booknetic_information_box_text, .booknetic_appointment_container .bkntc_information_box p, .booknetic_appointment_container .bkntc_information_box .booknetic_information_box_text, .booknetic_appointment_container .booknetic_notice p, .booknetic_appointment_container .dp-info-box p { padding-left: 10px !important; margin-left: 0 !important; } /* icon spacing */ .booknetic_appointment_container .booknetic_information_box i, .booknetic_appointment_container .booknetic_information_box svg, .booknetic_appointment_container .bkntc_information_box i, .booknetic_appointment_container .bkntc_information_box svg, .booknetic_appointment_container .booknetic_notice i, .booknetic_appointment_container .booknetic_notice svg, .booknetic_appointment_container .dp-info-box i, .booknetic_appointment_container .dp-info-box svg { margin-right: 10px !important; } } /* ========================================================= DAMIAN PHILPOTT — PAYMENT & REVIEW STAGE 1 — PAGE SHELL ========================================================= */ /* Header subtitle */ /* Main checkout layout */ @media (min-width: 768px) { } /* Left summary card */ /* Right payment section */ /* Footer */ /* ========================================================= PAYMENT & REVIEW — PAYMENT AREA FINAL PASS ========================================================= */ /* --------------------------------------------------------- PAYMENT METHOD HEADING --------------------------------------------------------- */ /* --------------------------------------------------------- PAYMENT METHOD STACK --------------------------------------------------------- */ /* --------------------------------------------------------- PAYMENT CARDS --------------------------------------------------------- */ /* Icon */ /* Main title */ /* Descriptive line */ /* Copy */ /* Hover */ /* Selected */ /* ========================================================= PAYMENT AMOUNT ========================================================= */ /* Deposit amount */ /* Deposit / Full amount choices */ /* Selected choice text */ /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media only screen and (max-width: 767px) { } /* ========================================================= PAYMENT & REVIEW — RESPECT BOOKNETIC PAYMENT VISIBILITY Deposit controls must only appear for online payment. ========================================================= */ /* ========================================================= DAMIAN PHILPOTT — PAYMENT & REVIEW STAGE 3 — POINTS / COUPON / TOTAL ========================================================= */ /* --------------------------------------------------------- ZERO DISCOUNT --------------------------------------------------------- */ /* --------------------------------------------------------- YOUR BOOKING LABEL --------------------------------------------------------- */ /* --------------------------------------------------------- LOYALTY POINTS --------------------------------------------------------- */ /* --------------------------------------------------------- COUPON / DISCOUNT CODE --------------------------------------------------------- */ /* --------------------------------------------------------- TOTAL --------------------------------------------------------- */ /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media only screen and (max-width: 767px) { } /* ========================================================= DAMIAN PHILPOTT — PAYMENT & REVIEW STAGE 4 — VISUAL CLEANUP ========================================================= */ /* ========================================================= POINTS — REMOVE OLD "1 POINT = £0.10" PSEUDO TEXT ========================================================= */ /* ========================================================= USE POINTS POPUP ========================================================= */ /* ========================================================= COUPON — REMOVE THE AWKWARD SIDE LABEL ========================================================= */ /* ========================================================= PAYMENT CARDS — FIX TITLE / DESCRIPTION ALIGNMENT ========================================================= */ /* ========================================================= TOTAL — SLIGHTLY TIGHTER ========================================================= */ /* ========================================================= PAYMENT & REVIEW — FINAL LEFT CARD COMPRESSION ========================================================= */ /* ========================================================= DAMIAN PHILPOTT — PAYMENT & REVIEW MOBILE FINAL LAYOUT FIX ========================================================= */ @media only screen and (max-width: 767px) { /* ----------------------------------------------------- MAIN STEP 7 LAYOUT ----------------------------------------------------- */ /* ----------------------------------------------------- NEVER SHOW BOOKNETIC HIDDEN PRICE ROWS ----------------------------------------------------- */ /* ----------------------------------------------------- POINTS — COMPACT MOBILE ROW ----------------------------------------------------- */ /* ----------------------------------------------------- BOOKING SUMMARY ----------------------------------------------------- */ /* ----------------------------------------------------- COUPON ----------------------------------------------------- */ /* ----------------------------------------------------- PAYMENT METHOD HEADING ----------------------------------------------------- */ /* ----------------------------------------------------- PAYMENT METHODS — FULL WIDTH STACK ----------------------------------------------------- */ /* ----------------------------------------------------- DEPOSIT SECTION ----------------------------------------------------- */ /* Booknetic controls visibility — don't override it */ /* ----------------------------------------------------- TOTAL ----------------------------------------------------- */ }/* ========================================================= DAMIAN PHILPOTT — PAYMENT & REVIEW MOBILE PAYMENT OVERRIDE — FINAL Must remain at the very bottom of Master CSS ========================================================= */ @media only screen and (max-width: 767px) { /* PAYMENT METHODS — ONE FULL-WIDTH COLUMN */ /* Heading gets its own full row */ /* BOTH PAYMENT CARDS — FULL WIDTH */ /* Icon */ /* Main payment title */ /* Selected title gold */ /* Description */ /* ===================================================== DEPOSIT AREA ===================================================== */ /* CRITICAL: Pay at Appointment must NOT expose deposit controls */ /* When SumUp is selected */ }/* ========================================================= PAYMENT & REVIEW CLOSE DEPOSIT AREA WHEN PAY AT APPOINTMENT IS SELECTED ========================================================= */ /* ========================================================= PAYMENT & REVIEW MOBILE — FORCE DEPOSIT CLOSED FOR PAY AT APPOINTMENT MUST STAY AT ABSOLUTE BOTTOM OF MASTER CSS ========================================================= */ @media only screen and (max-width: 767px) { } /* ============================================================ DAMIAN PHILPOTT — BOOKNETIC MASTER V38 PAYMENT & REVIEW — CONSOLIDATED STEP 7 ------------------------------------------------------------ V38 replaces the accumulated Confirm Details / Payment & Review overrides with one desktop system and one mobile system. IMPORTANT: - Steps 1–6, cart, packages, success screen and global width protection remain in the V37 stylesheet unchanged. - Booknetic still owns payment calculations and gateway state. - payment-review.js supplies only presentation-state classes: .dp-payment-local .dp-payment-sumup .dp-local-payment-selected .dp-online-payment-selected .dp-payment-summary-card ============================================================ */ /* ---------- Active Step 7 shell / header ---------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) { height: auto !important; min-height: 0 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_appointment_container { height: auto !important; min-height: 0 !important; overflow: visible !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_appointment_container_body { height: auto !important; min-height: 0 !important; max-height: none !important; padding-top: 18px !important; padding-bottom: 18px !important; overflow: visible !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_appointment_container_header_text::before { content: "7" !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_appointment_container_header_text::after { content: "Choose how you’d like to pay and confirm your booking" !important; color: #8F8F8F !important; font-size: 11px !important; font-weight: 400 !important; line-height: 16px !important; } /* ---------- Shared Step 7 layout ---------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_step_body, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_sum_body, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_deposit_body, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_methods_container, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_methods_footer { min-width: 0 !important; box-sizing: border-box !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_sum_body, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_deposit_body { width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_methods_container { width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ---------- Loyalty points ---------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) #booknetic-redeem-points-container { display: flex !important; align-items: center !important; width: 100% !important; min-height: 54px !important; margin: 0 0 10px !important; padding: 8px 10px !important; background: #050505 !important; border: 1px solid #292929 !important; border-radius: 2px !important; box-sizing: border-box !important; overflow: visible !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) #booknetic-redeem-points-container > img { flex: 0 0 auto !important; width: 18px !important; height: 18px !important; margin: 0 9px 0 0 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) #booknetic-redeem-points-container .points-details { display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 3px 8px !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) #booknetic-redeem-points-container .total-points { margin: 0 !important; color: #FFFFFF !important; font-size: 14px !important; font-weight: 700 !important; line-height: 18px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) #booknetic-redeem-points-container .point-value { margin: 0 !important; color: #858585 !important; font-size: 9px !important; font-weight: 400 !important; line-height: 14px !important; white-space: nowrap !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) #booknetic-redeem-points-container .point-value::before, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) #booknetic-redeem-points-container .point-value::after { content: none !important; display: none !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic-use-points-wrapper { position: relative !important; flex: 0 0 auto !important; margin-left: 10px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic-use-coins-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 78px !important; min-height: 34px !important; padding: 0 12px !important; background: #050505 !important; color: #FFD700 !important; border: 1px solid #FFD700 !important; border-radius: 2px !important; box-shadow: none !important; font-size: 10px !important; font-weight: 600 !important; cursor: pointer !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic-use-coins-btn:hover { background: #FFD700 !important; color: #000000 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic-use-points { position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; left: auto !important; width: 190px !important; min-width: 190px !important; margin: 0 !important; padding: 12px !important; background: #080808 !important; border: 1px solid #343434 !important; border-radius: 2px !important; box-shadow: 0 10px 30px rgba(0,0,0,.55) !important; z-index: 50 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic-use-points label { display: block !important; margin: 0 0 8px !important; color: #FFFFFF !important; font-size: 11px !important; font-weight: 600 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic-use-points > div { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 7px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) #bookneticUsePoints { width: 100% !important; min-width: 0 !important; height: 36px !important; padding: 0 10px !important; background: #030303 !important; color: #FFFFFF !important; border: 1px solid #333333 !important; border-radius: 2px !important; box-sizing: border-box !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic-use-points-button { height: 36px !important; min-width: 52px !important; padding: 0 11px !important; background: #FFD700 !important; color: #000000 !important; border: 1px solid #FFD700 !important; border-radius: 2px !important; font-size: 9px !important; font-weight: 700 !important; } /* ---------- Your booking card ---------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_sum_body > .booknetic_portlet { width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 16px !important; background: #050505 !important; border: 1px solid #303030 !important; border-radius: 4px !important; box-shadow: none !important; box-sizing: border-box !important; overflow: visible !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .dp-payment-summary-card::before { content: "YOUR BOOKING" !important; display: block !important; margin: 0 0 10px !important; padding: 0 0 10px !important; color: #FFD700 !important; border-bottom: 1px solid #242424 !important; font-size: 9px !important; font-weight: 700 !important; line-height: 14px !important; letter-spacing: .14em !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .dp-payment-summary-card, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .dp-payment-summary-card .booknetic_portlet_content, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .dp-payment-summary-card .booknetic_prices_box { height: auto !important; min-height: 0 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .dp-payment-summary-card .booknetic_portlet_content { max-height: none !important; overflow: visible !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; width: 100% !important; min-height: 38px !important; margin: 0 !important; padding: 8px 0 !important; background: #050505 !important; border: 0 !important; border-bottom: 1px solid #202020 !important; box-sizing: border-box !important; overflow: visible !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details:last-of-type { border-bottom: 0 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details::before, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details::after, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details_title::before, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details_title::after, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details_price::before, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details_price::after { content: none !important; display: none !important; border: 0 !important; background: none !important; background-image: none !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details > .booknetic_confirm_details_title { float: none !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: #050505 !important; color: #F2F2F2 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 20px !important; white-space: normal !important; word-break: normal !important; overflow: visible !important; text-align: left !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details > .booknetic_confirm_details_price { float: none !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; flex: 0 0 auto !important; width: auto !important; min-width: 74px !important; margin: 0 !important; padding: 0 !important; background: #050505 !important; color: #FFD700 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 20px !important; white-space: nowrap !important; text-align: right !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details.booknetic_hidden, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details.dp-zero-discount { display: none !important; } /* ---------- Coupon ---------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .dp-payment-summary-card .booknetic_panel_footer { position: static !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 14px 12px 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_add_coupon { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 7px !important; width: 100% !important; max-width: 100% !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-sizing: border-box !important; overflow: visible !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_add_coupon::before { content: none !important; display: none !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_add_coupon #booknetic_coupon { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 11px !important; background-color: #050505 !important; background-image: none !important; color: #FFFFFF !important; border: 1px solid #303030 !important; border-radius: 2px !important; box-shadow: none !important; box-sizing: border-box !important; font-size: 11px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_add_coupon #booknetic_coupon::placeholder { color: #686868 !important; opacity: 1 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_add_coupon #booknetic_coupon:focus { border-color: #FFD700 !important; outline: none !important; box-shadow: none !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_add_coupon > div { display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_coupon_ok_btn, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_coupon_cancel_btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; border-radius: 2px !important; box-shadow: none !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_coupon_ok_btn { min-width: 62px !important; padding: 0 12px !important; background: #FFD700 !important; color: #000000 !important; border: 1px solid #FFD700 !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: .04em !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_coupon_cancel_btn { min-width: 58px !important; padding: 0 11px !important; background: #050505 !important; color: #BEBEBE !important; border: 1px solid #343434 !important; font-size: 9px !important; font-weight: 600 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_coupon_cancel_btn:hover { background: #0A0A0A !important; color: #FFD700 !important; border-color: #FFD700 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_add_coupon.booknetic_coupon_ok #booknetic_coupon { padding-right: 38px !important; border-color: #FFD700 !important; background-image: url("https://damianphilpott.com/wp-content/plugins/booknetic/app/Frontend/assets/icons/success.svg") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 18px 18px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_add_coupon.booknetic_coupon_ok::after { content: none !important; display: none !important; background-image: none !important; } /* ---------- Total ---------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_sum_price { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; width: 100% !important; min-height: 54px !important; height: 54px !important; margin: 14px 0 0 !important; padding: 0 2px !important; background: #050505 !important; color: #FFFFFF !important; border-top: 1px solid #303030 !important; border-bottom: 0 !important; box-sizing: border-box !important; overflow: visible !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_sum_price > div:first-child { color: #A7A7A7 !important; font-size: 9px !important; font-weight: 700 !important; line-height: 14px !important; letter-spacing: .13em !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_sum_price .booknetic_sum_price { position: static !important; float: none !important; display: block !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; color: #FFD700 !important; font-size: 20px !important; font-weight: 700 !important; line-height: 25px !important; text-align: right !important; white-space: nowrap !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } /* ---------- Payment methods ---------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_methods { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 10px !important; margin: 0 !important; box-sizing: border-box !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_methods::before { content: "PAYMENT METHOD" !important; display: block !important; width: 100% !important; margin: 0 0 10px !important; color: #FFD700 !important; font-size: 10px !important; font-weight: 700 !important; line-height: 14px !important; letter-spacing: .14em !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-local, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-sumup { position: relative !important; display: grid !important; grid-template-columns: 34px minmax(0,1fr) !important; grid-template-rows: auto auto !important; column-gap: 12px !important; row-gap: 1px !important; align-items: center !important; align-content: center !important; justify-content: stretch !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 72px !important; margin: 0 !important; padding: 12px 15px !important; background: #050505 !important; border: 1px solid #303030 !important; border-radius: 4px !important; box-shadow: none !important; box-sizing: border-box !important; cursor: pointer !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-local img, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-sumup img { position: static !important; grid-column: 1 !important; grid-row: 1 / 3 !important; width: 27px !important; height: 27px !important; max-width: 30px !important; max-height: 30px !important; margin: 0 !important; align-self: center !important; justify-self: center !important; opacity: .8 !important; object-fit: contain !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-local > span, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-sumup > span { position: static !important; grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; justify-self: start !important; width: auto !important; max-width: none !important; margin: 0 !important; color: #FFFFFF !important; font-size: 13px !important; font-weight: 600 !important; line-height: 18px !important; text-align: left !important; white-space: normal !important; word-break: normal !important; transform: none !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-local::after, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-sumup::after { position: static !important; grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; justify-self: start !important; display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; color: #858585 !important; font-size: 9px !important; font-weight: 400 !important; line-height: 13px !important; text-align: left !important; white-space: normal !important; word-break: normal !important; transform: none !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-local::after { content: "Pay in salon on the day" !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-sumup::after { content: "Secure payment via SumUp" !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method:hover { background: #080808 !important; border-color: #555555 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.booknetic_payment_method_selected { background: #070700 !important; border-color: #FFD700 !important; box-shadow: none !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.booknetic_payment_method_selected > span { color: #FFD700 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.booknetic_payment_method_selected img { opacity: 1 !important; } /* ---------- Deposit / full payment ---------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_methods_footer { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 16px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; overflow: visible !important; } /* Closed by default. JS adds one mutually-exclusive payment state class. */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_deposit_price, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_deposit_radios { display: none !important; } /* Online selected: only non-hidden Booknetic controls are exposed. */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) [data-step-id="confirm_details"].dp-online-payment-selected .booknetic_deposit_price:not(.booknetic_hidden) { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 47px !important; margin: 0 !important; padding: 0 2px !important; background: #000000 !important; color: #FFFFFF !important; border-top: 1px solid #252525 !important; border-bottom: 1px solid #252525 !important; box-sizing: border-box !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) [data-step-id="confirm_details"].dp-online-payment-selected .booknetic_deposit_radios:not(.booknetic_hidden) { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; margin: 10px 0 0 !important; padding: 0 !important; background: transparent !important; box-sizing: border-box !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) [data-step-id="confirm_details"].dp-online-payment-selected .booknetic_deposit_radios:not(.booknetic_hidden) > div { display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; min-height: 38px !important; margin: 0 !important; padding: 0 10px !important; background: #050505 !important; border: 1px solid #292929 !important; border-radius: 2px !important; box-sizing: border-box !important; overflow: visible !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_deposit_radios input[type="radio"] { appearance: none !important; -webkit-appearance: none !important; width: 15px !important; height: 15px !important; min-width: 15px !important; min-height: 15px !important; margin: 0 8px 0 0 !important; padding: 0 !important; background: #000000 !important; border: 2px solid #FFFFFF !important; border-radius: 50% !important; outline: none !important; box-shadow: none !important; cursor: pointer !important; flex: 0 0 15px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_deposit_radios input[type="radio"]:checked { background: #FFD700 !important; border: 4px solid #FFD700 !important; box-shadow: inset 0 0 0 3px #000000 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_deposit_radios label { margin: 0 !important; color: #D7D7D7 !important; font-size: 11px !important; font-weight: 500 !important; line-height: 16px !important; cursor: pointer !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_deposit_radios input[type="radio"]:checked + label { color: #FFD700 !important; font-weight: 700 !important; } /* Local selected and Booknetic-hidden controls remain closed. */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) [data-step-id="confirm_details"].dp-local-payment-selected .booknetic_deposit_price, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) [data-step-id="confirm_details"].dp-local-payment-selected .booknetic_deposit_radios, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_deposit_price.booknetic_hidden, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_deposit_radios.booknetic_hidden { display: none !important; } /* ---------- Warning / validation ---------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_warning_message { min-width: 0 !important; max-width: 260px !important; min-height: 36px !important; margin: 0 auto !important; padding: 9px 12px !important; box-sizing: border-box !important; background: #080808 !important; color: #FFD700 !important; border: 1px solid #FFD700 !important; border-radius: 3px !important; box-shadow: none !important; font-size: 11px !important; font-weight: 600 !important; line-height: 16px !important; text-align: center !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_warning_message::before { color: #FFD700 !important; } /* ---------- Footer ---------- */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_appointment_container_footer { position: static !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 62px !important; margin: 0 !important; padding: 10px 20px !important; border-top: 1px solid #303030 !important; box-sizing: border-box !important; overflow: visible !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_booking_btn { min-width: 190px !important; height: 42px !important; } /* ============================================================ V38 — DESKTOP ============================================================ */ @media only screen and (min-width: 768px) { #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_step_body { display: grid !important; grid-template-columns: minmax(0,1.18fr) minmax(300px,.82fr) !important; gap: 22px !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 22px 8px !important; align-items: start !important; box-sizing: border-box !important; overflow: visible !important; } } /* ============================================================ V38 — MOBILE ============================================================ */ @media only screen and (max-width: 767px) { #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ), #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_appointment_container, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_appointment_container_header, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_appointment_container_body, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_appointment_container_footer { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_step_body { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 18px 16px 20px !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: visible !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_sum_body, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_deposit_body, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_portlet, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) #booknetic-redeem-points-container, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_methods_container, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_methods_footer { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_deposit_body { margin-top: 26px !important; } /* Points row */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) #booknetic-redeem-points-container { display: grid !important; grid-template-columns: 24px minmax(0,1fr) auto !important; align-items: center !important; gap: 10px !important; min-height: 72px !important; padding: 13px 14px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) #booknetic-redeem-points-container > img { grid-column: 1 !important; width: 20px !important; height: 20px !important; margin: 0 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) #booknetic-redeem-points-container .points-details { grid-column: 2 !important; display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 4px 8px !important; margin: 0 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic-use-points-wrapper { grid-column: 3 !important; width: auto !important; margin: 0 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic-use-coins-btn { min-width: 92px !important; height: 42px !important; padding: 0 12px !important; } /* Summary */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_sum_body > .booknetic_portlet { padding: 14px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details { gap: 12px !important; min-height: 36px !important; padding: 12px 0 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details > .booknetic_confirm_details_title { font-size: 14px !important; line-height: 19px !important; overflow-wrap: anywhere !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_details > .booknetic_confirm_details_price { min-width: 68px !important; font-size: 14px !important; line-height: 19px !important; } /* Coupon */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_add_coupon { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 8px !important; width: 100% !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_add_coupon #booknetic_coupon { width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; font-size: 16px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_coupon_ok_btn, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_coupon_cancel_btn { height: 46px !important; min-height: 46px !important; font-size: 11px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_coupon_ok_btn { min-width: 84px !important; } /* Total */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_sum_price { height: auto !important; min-height: 64px !important; margin-top: 14px !important; padding: 14px 4px 0 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_confirm_sum_price .booknetic_sum_price { font-size: 20px !important; line-height: 1.2 !important; } /* Payment method full-width stack */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_methods { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_methods::before { margin-bottom: 8px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-local, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-sumup { grid-template-columns: 42px minmax(0,1fr) !important; column-gap: 13px !important; row-gap: 2px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 78px !important; padding: 14px 16px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-local img, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-sumup img { width: 30px !important; height: 30px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-local > span, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-sumup > span { font-size: 14px !important; font-weight: 700 !important; line-height: 18px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-local::after, #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_method.dp-payment-sumup::after { font-size: 11px !important; line-height: 15px !important; } /* Deposit */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_payment_methods_footer { margin-top: 14px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) [data-step-id="confirm_details"].dp-online-payment-selected .booknetic_deposit_price:not(.booknetic_hidden) { min-height: 48px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) [data-step-id="confirm_details"].dp-online-payment-selected .booknetic_deposit_radios:not(.booknetic_hidden) { grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; margin-top: 10px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) [data-step-id="confirm_details"].dp-online-payment-selected .booknetic_deposit_radios:not(.booknetic_hidden) > div { min-height: 50px !important; padding: 0 12px !important; } /* Footer */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="confirm_details"] ) .booknetic_appointment_container_footer { min-height: 60px !important; padding: 10px 20px !important; } }