/* ============================================================ DAMIAN PHILPOTT — BOOKNETIC INFORMATION FORM v1.0.0 ============================================================ */ /* ============================================================ STEP LAYOUT ============================================================ */ #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced { color: #FFFFFF !important; } #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-row { margin-bottom: 0 !important; } #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-group { position: relative !important; margin-bottom: 14px !important; box-sizing: border-box !important; } /* ============================================================ EDITORIAL SECTION LABELS ============================================================ */ #booknetic_theme_8 [data-step-id="information"] .dp-info-section-label { position: relative !important; display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; margin: 3px 0 13px !important; color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 9px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: .17em !important; text-transform: uppercase !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="information"] .dp-info-section-label::after { content: "" !important; flex: 1 1 auto !important; height: 1px !important; background: #222222 !important; } /* ============================================================ LABELS ============================================================ */ #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-group > label, #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-group label { display: block !important; margin: 0 0 7px !important; color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: .01em !important; } /* common Booknetic required markers */ #booknetic_theme_8 [data-step-id="information"] label .required, #booknetic_theme_8 [data-step-id="information"] label .booknetic_required, #booknetic_theme_8 [data-step-id="information"] label span[style*="red"] { color: #C94B55 !important; } /* ============================================================ INPUTS ============================================================ */ #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-group input:not([type="radio"]):not([type="checkbox"]), #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced input.form-control, #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced textarea { width: 100% !important; min-height: 48px !important; padding: 0 13px !important; background: #090A0B !important; background-color: #090A0B !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 1px solid #34393D !important; border-radius: 3px !important; box-shadow: none !important; outline: none !important; caret-color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; box-sizing: border-box !important; transition: border-color .16s ease, background-color .16s ease !important; } #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced textarea { min-height: 92px !important; padding-top: 12px !important; padding-bottom: 12px !important; resize: vertical !important; } #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-group input::placeholder, #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced textarea::placeholder { color: #73777B !important; -webkit-text-fill-color: #73777B !important; opacity: 1 !important; } #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-group input:not([type="radio"]):not([type="checkbox"]):focus, #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced textarea:focus { background: #060708 !important; background-color: #060708 !important; border-color: #FFD700 !important; box-shadow: 0 0 0 1px rgba(255, 215, 0, .07) !important; } /* autofill */ #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced input:-webkit-autofill, #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced input:-webkit-autofill:hover, #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced input:-webkit-autofill:focus { -webkit-text-fill-color: #FFFFFF !important; -webkit-box-shadow: 0 0 0 1000px #090A0B inset !important; box-shadow: 0 0 0 1000px #090A0B inset !important; border-color: #34393D !important; caret-color: #FFD700 !important; } /* ============================================================ EMAIL / PERSON ICONS ============================================================ */ #booknetic_theme_8 [data-step-id="information"] .dp-info-field-email input, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-confirm-email input, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-name input, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-surname input { padding-left: 42px !important; } #booknetic_theme_8 [data-step-id="information"] .dp-info-field-email::after, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-confirm-email::after, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-name::after, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-surname::after { content: "" !important; position: absolute !important; left: 13px !important; bottom: 15px !important; width: 17px !important; height: 17px !important; opacity: .8 !important; background-position: center !important; background-repeat: no-repeat !important; background-size: contain !important; pointer-events: none !important; z-index: 4 !important; } #booknetic_theme_8 [data-step-id="information"] .dp-info-field-email::after, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-confirm-email::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.7' y='4.2' width='14.6' height='11.6' rx='1.3' fill='none' stroke='%23B9B9B9' stroke-width='1.35'/%3E%3Cpath d='m3.7 5.5 6.3 5 6.3-5' fill='none' stroke='%23B9B9B9' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } #booknetic_theme_8 [data-step-id="information"] .dp-info-field-name::after, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-surname::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='6.3' r='3.1' fill='none' stroke='%23B9B9B9' stroke-width='1.35'/%3E%3Cpath d='M4.3 16.2c.6-3 2.6-4.7 5.7-4.7s5.1 1.7 5.7 4.7' fill='none' stroke='%23B9B9B9' stroke-width='1.35' stroke-linecap='round'/%3E%3C/svg%3E") !important; } /* leave enough space for Booknetic's clear icon */ #booknetic_theme_8 [data-step-id="information"] .dp-info-field-email input { padding-right: 38px !important; } /* ============================================================ HELPER / DESCRIPTION TEXT ============================================================ */ #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-group small, #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-group .form-text, #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-group > div:not(.iti):not(.select2-container) { color: #707478 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 9px !important; font-weight: 400 !important; line-height: 1.45 !important; } /* ============================================================ PHONE / INTL-TEL-INPUT ============================================================ */ #booknetic_theme_8 [data-step-id="information"] .iti { width: 100% !important; background: transparent !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="information"] .iti input { min-height: 48px !important; background: #090A0B !important; background-color: #090A0B !important; border: 1px solid #34393D !important; } #booknetic_theme_8 [data-step-id="information"] .iti input:focus { border-color: #FFD700 !important; } #booknetic_theme_8 [data-step-id="information"] .iti__selected-country, #booknetic_theme_8 [data-step-id="information"] .iti__selected-flag { background: transparent !important; border: 0 !important; } #booknetic_theme_8 [data-step-id="information"] .iti__arrow { border-top-color: #FFD700 !important; } #booknetic_theme_8 [data-step-id="information"] .iti__dropdown-content, #booknetic_theme_8 [data-step-id="information"] .iti__country-list, body:has(.wp-block-booknetic-booking) .iti__dropdown-content, body:has(.wp-block-booknetic-booking) .iti__country-list { background: #080808 !important; color: #FFFFFF !important; border: 1px solid #FFD700 !important; border-radius: 2px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, .45) !important; } body:has(.wp-block-booknetic-booking) .iti__search-input { min-height: 38px !important; background: #050505 !important; color: #FFFFFF !important; border: 1px solid #353535 !important; outline: none !important; } body:has(.wp-block-booknetic-booking) .iti__search-input:focus { border-color: #FFD700 !important; } body:has(.wp-block-booknetic-booking) .iti__country { color: #D8D8D8 !important; } body:has(.wp-block-booknetic-booking) .iti__country:hover, body:has(.wp-block-booknetic-booking) .iti__country.iti__highlight { background: #151515 !important; color: #FFFFFF !important; } /* ============================================================ GENDER / SELECT2 ============================================================ */ #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: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; padding: 0 42px 0 13px !important; background: #090A0B !important; color: #FFFFFF !important; border: 1px solid #34393D !important; border-radius: 3px !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; font-size: 12px !important; line-height: 46px !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__placeholder { color: #73777B !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__arrow { top: 0 !important; right: 12px !important; width: 20px !important; height: 46px !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: #060708 !important; border-color: #FFD700 !important; box-shadow: 0 0 0 1px rgba(255, 215, 0, .07) !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__clear { color: #A0A0A0 !important; margin-right: 9px !important; } body:has(.wp-block-booknetic-booking) .select2-dropdown { background: #080808 !important; color: #FFFFFF !important; border: 1px solid #FFD700 !important; border-radius: 2px !important; box-shadow: 0 12px 30px 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 #353535 !important; border-radius: 2px !important; outline: none !important; box-shadow: none !important; box-sizing: border-box !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__option { padding: 9px 11px !important; background: #080808 !important; color: #D8D8D8 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 11px !important; } body:has(.wp-block-booknetic-booking) .select2-results__option--highlighted, body:has(.wp-block-booknetic-booking) .select2-results__option[aria-selected="true"] { background: #151515 !important; color: #FFD700 !important; } /* ============================================================ SELF-DESCRIBE CONDITIONAL FIELD ============================================================ */ #booknetic_theme_8 [data-step-id="information"] .dp-info-field-gender-detail { margin-top: 4px !important; } #booknetic_theme_8 [data-step-id="information"] .dp-info-field-gender-detail label { color: #FFD700 !important; } /* ============================================================ VALIDATION ============================================================ */ #booknetic_theme_8 [data-step-id="information"] .form-group.has-error input, #booknetic_theme_8 [data-step-id="information"] .form-group.has-error textarea, #booknetic_theme_8 [data-step-id="information"] .form-group.has-error .select2-selection, #booknetic_theme_8 [data-step-id="information"] .form-group.is-invalid input, #booknetic_theme_8 [data-step-id="information"] .form-group.is-invalid textarea, #booknetic_theme_8 [data-step-id="information"] input[aria-invalid="true"] { border-color: #A84A4A !important; box-shadow: 0 0 0 1px rgba(168, 74, 74, .10) !important; } #booknetic_theme_8 [data-step-id="information"] .form-group .invalid-feedback, #booknetic_theme_8 [data-step-id="information"] .form-group .error, #booknetic_theme_8 [data-step-id="information"] .form-group .booknetic_error { color: #C76A6A !important; font-size: 9px !important; line-height: 1.4 !important; } /* ============================================================ PRIVACY NOTE ============================================================ */ #booknetic_theme_8 [data-step-id="information"] .dp-info-privacy { display: flex !important; align-items: center !important; gap: 8px !important; margin: 4px 0 3px !important; padding: 10px 0 0 !important; color: #777B7E !important; border-top: 1px solid #1F1F1F !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 9px !important; font-weight: 400 !important; line-height: 1.35 !important; } #booknetic_theme_8 [data-step-id="information"] .dp-info-privacy::before { content: "" !important; flex: 0 0 15px !important; width: 15px !important; height: 15px !important; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='4.3' y='7.5' width='9.4' height='7.4' rx='1.2' fill='none' stroke='%23999999' stroke-width='1.25'/%3E%3Cpath d='M6.3 7.5V5.8A2.7 2.7 0 0 1 9 3.1a2.7 2.7 0 0 1 2.7 2.7v1.7' fill='none' stroke='%23999999' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important; } /* ============================================================ CLEAR ICON — ALIGN WITH TALLER INPUT ============================================================ */ #booknetic_theme_8 [data-step-id="information"] .bkntc_input_identifier_clear { top: 32px !important; right: 10px !important; width: 20px !important; height: 20px !important; } /* ============================================================ PORTRAIT MOBILE ============================================================ */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8 [data-step-id="information"] .dp-info-section-label { margin-top: 2px !important; margin-bottom: 11px !important; font-size: 8.5px !important; } #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-group { margin-bottom: 12px !important; } #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-group input:not([type="radio"]):not([type="checkbox"]), #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced textarea, #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection { min-height: 48px !important; /* prevents iOS Safari focus zoom */ font-size: 16px !important; } #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-group input:not([type="radio"]):not([type="checkbox"]) { font-size: 16px !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__rendered { font-size: 16px !important; } #booknetic_theme_8 [data-step-id="information"] .dp-info-privacy { margin-top: 2px !important; font-size: 8.5px !important; } } /* ============================================================ SHORT LANDSCAPE PHONE ============================================================ */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8 [data-step-id="information"] .dp-info-section-label { margin-bottom: 8px !important; font-size: 8px !important; } #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-group { margin-bottom: 9px !important; } #booknetic_theme_8 [data-step-id="information"].dp-info-enhanced .form-group input:not([type="radio"]):not([type="checkbox"]), #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection { min-height: 42px !important; height: 42px !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__rendered { line-height: 40px !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__arrow { height: 40px !important; } #booknetic_theme_8 [data-step-id="information"] .dp-info-privacy { padding-top: 7px !important; font-size: 8px !important; } } /* ============================================================ v1.0.1 — ALIGNMENT / FLOW POLISH ============================================================ */ /* Let this dynamic information step grow naturally. Prevents the form from being trapped behind the fixed footer when Confirm Email / self-describe fields appear. */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="information"] ) .booknetic_appointment_container { 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="information"] ) .booknetic_appointment_container_body { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; padding-bottom: 18px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="information"] ) .booknetic_appointment_container_footer { position: static !important; width: 100% !important; margin: 0 !important; } /* Confirm Email is a deliberate full-width row instead of leaving an accidental empty right-hand column. */ #booknetic_theme_8 [data-step-id="information"] .form-group.dp-info-field-confirm-email { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } /* Fix the decorative icons to the INPUT, not the bottom of the entire form-group. Email helper copy previously pushed the icon below its field. */ #booknetic_theme_8 [data-step-id="information"] .dp-info-field-email::after, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-confirm-email::after, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-name::after, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-surname::after { top: 35px !important; bottom: auto !important; left: 14px !important; transform: translateY(-50%) !important; } /* Give placeholder/value copy a little more breathing room after the icon. */ #booknetic_theme_8 [data-step-id="information"] .dp-info-field-email input, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-confirm-email input, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-name input, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-surname input { padding-left: 46px !important; } /* Email clear control remains on the opposite side. */ #booknetic_theme_8 [data-step-id="information"] .dp-info-field-email input { padding-right: 42px !important; } /* Keep helper text aligned with the actual input edge. */ #booknetic_theme_8 [data-step-id="information"] .dp-info-field-email small, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-email .form-text { display: block !important; margin-top: 5px !important; } /* Improve the vertical rhythm around the two editorial sections. */ #booknetic_theme_8 [data-step-id="information"] .dp-info-contact-label { margin-top: 1px !important; } #booknetic_theme_8 [data-step-id="information"] .dp-info-details-label { margin-top: 5px !important; } /* Privacy note gets its own breathing room and can no longer disappear beneath the booking footer. */ #booknetic_theme_8 [data-step-id="information"] .dp-info-privacy { margin-top: 5px !important; margin-bottom: 2px !important; padding-top: 11px !important; padding-bottom: 2px !important; position: relative !important; z-index: 2 !important; } /* Keep conditional self-describe spacing consistent. */ #booknetic_theme_8 [data-step-id="information"] .dp-info-field-gender-detail { margin-top: 2px !important; margin-bottom: 12px !important; } /* ------------------------------------------------------------ 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="information"] ) .booknetic_appointment_container_body { overflow: visible !important; padding-bottom: 14px !important; } #booknetic_theme_8 [data-step-id="information"] .dp-info-field-email::after, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-confirm-email::after, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-name::after, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-surname::after { top: 35px !important; } #booknetic_theme_8 [data-step-id="information"] .dp-info-field-email input, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-confirm-email input, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-name input, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-surname input { padding-left: 46px !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="information"] ) .booknetic_appointment_container_body { overflow-y: auto !important; overflow-x: hidden !important; max-height: 50vh !important; padding-bottom: 12px !important; scrollbar-width: thin !important; scrollbar-color: #444444 #080808 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="information"] ) .booknetic_appointment_container_body::-webkit-scrollbar { width: 5px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="information"] ) .booknetic_appointment_container_body::-webkit-scrollbar-track { background: #080808 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="information"] ) .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="information"] ) .booknetic_appointment_container_body::-webkit-scrollbar-thumb:hover { background: #FFD700 !important; } #booknetic_theme_8 [data-step-id="information"] .dp-info-field-email::after, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-confirm-email::after, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-name::after, #booknetic_theme_8 [data-step-id="information"] .dp-info-field-surname::after { top: 32px !important; } } /* ============================================================ v1.0.2 — DYNAMIC FORM / FOOTER FIX Keep BACK + NEXT STEP visible when conditional fields appear. ============================================================ */ /* * JavaScript adds .dp-information-step-active to #booknetic_theme_8 * whenever Fill Information is the visible Booknetic step. * * This selector is deliberately more specific than the older * master stylesheet so the information step can have its own * scrolling body without altering the other booking steps. */ #booknetic_theme_8.dp-information-step-active .booknetic_appointment_container { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } #booknetic_theme_8.dp-information-step-active .booknetic_appointment_container_body { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; /* * Normal form usually fits with no scrolling. * Conditional fields can extend the form, at which point only * the body scrolls while the booking controls remain visible. */ max-height: min(390px, 50vh) !important; overflow-y: auto !important; overflow-x: hidden !important; padding-bottom: 18px !important; scroll-behavior: smooth !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; scrollbar-color: #444444 #080808 !important; } #booknetic_theme_8.dp-information-step-active .booknetic_appointment_container_body::-webkit-scrollbar { width: 5px !important; } #booknetic_theme_8.dp-information-step-active .booknetic_appointment_container_body::-webkit-scrollbar-track { background: #080808 !important; } #booknetic_theme_8.dp-information-step-active .booknetic_appointment_container_body::-webkit-scrollbar-thumb { background: #444444 !important; border-radius: 999px !important; } #booknetic_theme_8.dp-information-step-active .booknetic_appointment_container_body::-webkit-scrollbar-thumb:hover { background: #FFD700 !important; } #booknetic_theme_8.dp-information-step-active .booknetic_appointment_container_footer { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; flex: 0 0 auto !important; align-items: center !important; width: 100% !important; height: auto !important; min-height: 60px !important; margin: 0 !important; visibility: visible !important; opacity: 1 !important; transform: none !important; overflow: visible !important; z-index: 50 !important; } /* Reinforce both controls in the expanded state. */ #booknetic_theme_8.dp-information-step-active .booknetic_appointment_container_footer .booknetic_prev_step, #booknetic_theme_8.dp-information-step-active .booknetic_appointment_container_footer .booknetic_next_step { visibility: visible !important; opacity: 1 !important; transform: none !important; } /* When "Prefer to self-describe" creates the extra field, give the body a little extra usable height on larger screens. */ @media screen and (min-width: 768px) { #booknetic_theme_8.dp-information-step-active.dp-information-expanded .booknetic_appointment_container_body { max-height: min(410px, 53vh) !important; } } /* Portrait phones: keep enough room for the keyboard and footer. */ @media only screen and (max-width: 767px) and (orientation: portrait) { #booknetic_theme_8.dp-information-step-active .booknetic_appointment_container_body { max-height: min(56dvh, 520px) !important; padding-bottom: 14px !important; } #booknetic_theme_8.dp-information-step-active .booknetic_appointment_container_footer { min-height: 58px !important; } } /* Short landscape phones: compact body with permanent controls. */ @media screen and (orientation: landscape) and (max-height: 600px) { #booknetic_theme_8.dp-information-step-active .booknetic_appointment_container_body, #booknetic_theme_8.dp-information-step-active.dp-information-expanded .booknetic_appointment_container_body { max-height: 48vh !important; } #booknetic_theme_8.dp-information-step-active .booknetic_appointment_container_footer { min-height: 52px !important; } } /* ============================================================ v1.1.3 — STANDARD APPOINTMENT INFORMATION FORM RESCUE ------------------------------------------------------------ Core layout and styling are CSS-only. No package selectors. No dependency on JS-added classes for scrolling/styling. ============================================================ */ /* ------------------------------------------------------------ ACTIVE STEP — RESTORE BODY SCROLL + KEEP FOOTER AVAILABLE ------------------------------------------------------------ */ #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="information"] ) .booknetic_appointment_container, #booknetic_theme_8:has( [data-step-id="information"][style*="display: block"] ) .booknetic_appointment_container { 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="information"] ) .booknetic_appointment_container_body, #booknetic_theme_8:has( [data-step-id="information"][style*="display: block"] ) .booknetic_appointment_container_body { height: auto !important; min-height: 0 !important; max-height: min(410px, 54vh) !important; padding: 18px 20px 20px !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; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="information"] ) .booknetic_appointment_container_body::-webkit-scrollbar, #booknetic_theme_8:has( [data-step-id="information"][style*="display: block"] ) .booknetic_appointment_container_body::-webkit-scrollbar { width: 5px !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="information"] ) .booknetic_appointment_container_body::-webkit-scrollbar-track, #booknetic_theme_8:has( [data-step-id="information"][style*="display: block"] ) .booknetic_appointment_container_body::-webkit-scrollbar-track { background: #080808 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="information"] ) .booknetic_appointment_container_body::-webkit-scrollbar-thumb, #booknetic_theme_8:has( [data-step-id="information"][style*="display: block"] ) .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="information"] ) .booknetic_appointment_container_body::-webkit-scrollbar-thumb:hover, #booknetic_theme_8:has( [data-step-id="information"][style*="display: block"] ) .booknetic_appointment_container_body::-webkit-scrollbar-thumb:hover { background: #FFD700 !important; } #booknetic_theme_8:has( .booknetic_appointment_step_element.booknetic_active_step[data-step-id="information"] ) .booknetic_appointment_container_footer, #booknetic_theme_8:has( [data-step-id="information"][style*="display: block"] ) .booknetic_appointment_container_footer { position: static !important; width: 100% !important; height: auto !important; min-height: 60px !important; margin: 0 !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; z-index: 50 !important; } /* ------------------------------------------------------------ CSS-ONLY EDITORIAL SECTION LABELS ------------------------------------------------------------ */ #booknetic_theme_8 [data-step-id="information"] .form-row:has(#bkntc_input_email)::before, #booknetic_theme_8 [data-step-id="information"] .form-row:has(#bkntc_input_name)::before { display: flex !important; align-items: center !important; gap: 12px !important; width: calc(100% - 16px) !important; margin: 1px 8px 13px !important; color: #FFD700 !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 9px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: .17em !important; text-transform: uppercase !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="information"] .form-row:has(#bkntc_input_email)::before { content: "CONTACT DETAILS" !important; } #booknetic_theme_8 [data-step-id="information"] .form-row:has(#bkntc_input_name)::before { content: "YOUR DETAILS" !important; margin-top: 4px !important; } #booknetic_theme_8 [data-step-id="information"] .form-row:has(#bkntc_input_email), #booknetic_theme_8 [data-step-id="information"] .form-row:has(#bkntc_input_name) { position: relative !important; } #booknetic_theme_8 [data-step-id="information"] .form-row:has(#bkntc_input_email)::after, #booknetic_theme_8 [data-step-id="information"] .form-row:has(#bkntc_input_name)::after { content: "" !important; position: absolute !important; top: 7px !important; right: 8px !important; height: 1px !important; background: #222222 !important; pointer-events: none !important; } #booknetic_theme_8 [data-step-id="information"] .form-row:has(#bkntc_input_email)::after { width: calc(100% - 132px) !important; } #booknetic_theme_8 [data-step-id="information"] .form-row:has(#bkntc_input_name)::after { width: calc(100% - 112px) !important; top: 10px !important; } /* ------------------------------------------------------------ FIELD LABELS + INPUTS ------------------------------------------------------------ */ #booknetic_theme_8 [data-step-id="information"] .form-group { position: relative !important; margin-bottom: 14px !important; } #booknetic_theme_8 [data-step-id="information"] .form-group > label { display: block !important; margin: 0 0 7px !important; color: #FFD700 !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.3 !important; } #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, #booknetic_theme_8 [data-step-id="information"] textarea { min-height: 48px !important; background: #090A0B !important; background-color: #090A0B !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 1px solid #34393D !important; border-radius: 3px !important; box-shadow: none !important; outline: none !important; caret-color: #FFD700 !important; font-size: 12px !important; box-sizing: border-box !important; } #booknetic_theme_8 [data-step-id="information"] .form-group input:not([type="radio"]):not([type="checkbox"]):focus, #booknetic_theme_8 [data-step-id="information"] textarea:focus { background: #060708 !important; border-color: #FFD700 !important; box-shadow: 0 0 0 1px rgba(255, 215, 0, .07) !important; } /* ------------------------------------------------------------ DIRECT FIELD ICONS — NO JS CLASS REQUIRED ------------------------------------------------------------ */ #booknetic_theme_8 [data-step-id="information"] .form-group:has(#bkntc_input_email)::after, #booknetic_theme_8 [data-step-id="information"] .form-group:has(#bkntc_input_email_confirm)::after, #booknetic_theme_8 [data-step-id="information"] .form-group:has(#bkntc_input_name)::after, #booknetic_theme_8 [data-step-id="information"] .form-group:has(#bkntc_input_surname)::after { content: "" !important; position: absolute !important; top: 35px !important; left: 14px !important; width: 17px !important; height: 17px !important; transform: translateY(-50%) !important; opacity: .8 !important; background-position: center !important; background-repeat: no-repeat !important; background-size: contain !important; pointer-events: none !important; z-index: 4 !important; } #booknetic_theme_8 [data-step-id="information"] .form-group:has(#bkntc_input_email)::after, #booknetic_theme_8 [data-step-id="information"] .form-group:has(#bkntc_input_email_confirm)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.7' y='4.2' width='14.6' height='11.6' rx='1.3' fill='none' stroke='%23B9B9B9' stroke-width='1.35'/%3E%3Cpath d='m3.7 5.5 6.3 5 6.3-5' fill='none' stroke='%23B9B9B9' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } #booknetic_theme_8 [data-step-id="information"] .form-group:has(#bkntc_input_name)::after, #booknetic_theme_8 [data-step-id="information"] .form-group:has(#bkntc_input_surname)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='6.3' r='3.1' fill='none' stroke='%23B9B9B9' stroke-width='1.35'/%3E%3Cpath d='M4.3 16.2c.6-3 2.6-4.7 5.7-4.7s5.1 1.7 5.7 4.7' fill='none' stroke='%23B9B9B9' stroke-width='1.35' stroke-linecap='round'/%3E%3C/svg%3E") !important; } #booknetic_theme_8 [data-step-id="information"] #bkntc_input_email, #booknetic_theme_8 [data-step-id="information"] #bkntc_input_email_confirm, #booknetic_theme_8 [data-step-id="information"] #bkntc_input_name, #booknetic_theme_8 [data-step-id="information"] #bkntc_input_surname { padding-left: 46px !important; } #booknetic_theme_8 [data-step-id="information"] #bkntc_input_email { padding-right: 42px !important; } /* ------------------------------------------------------------ CONFIRM EMAIL — FULL WIDTH ------------------------------------------------------------ */ #booknetic_theme_8 [data-step-id="information"] .form-row:has(#bkntc_input_email_confirm) .form-group { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* ------------------------------------------------------------ PHONE ------------------------------------------------------------ */ #booknetic_theme_8 [data-step-id="information"] .iti { width: 100% !important; } #booknetic_theme_8 [data-step-id="information"] .iti input { min-height: 48px !important; background: #090A0B !important; border: 1px solid #34393D !important; } #booknetic_theme_8 [data-step-id="information"] .iti__selected-country, #booknetic_theme_8 [data-step-id="information"] .iti__selected-flag { background: transparent !important; } #booknetic_theme_8 [data-step-id="information"] .iti__arrow { border-top-color: #FFD700 !important; } /* ------------------------------------------------------------ GENDER / SELECT2 ------------------------------------------------------------ */ #booknetic_theme_8 [data-step-id="information"] .select2-container { width: 100% !important; max-width: 100% !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection { min-height: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; padding: 0 42px 0 13px !important; background: #090A0B !important; border: 1px solid #34393D !important; border-radius: 3px !important; box-shadow: none !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__rendered { width: 100% !important; padding: 0 !important; color: #FFFFFF !important; font-size: 12px !important; line-height: 46px !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__placeholder { color: #73777B !important; } #booknetic_theme_8 [data-step-id="information"] .select2-container .select2-selection__arrow { top: 0 !important; right: 12px !important; width: 20px !important; height: 46px !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: #060708 !important; border-color: #FFD700 !important; } /* ------------------------------------------------------------ HELPER / PRIVACY TEXT ------------------------------------------------------------ */ #booknetic_theme_8 [data-step-id="information"] .bkntc_spam_notice, #booknetic_theme_8 [data-step-id="information"] .form-text, #booknetic_theme_8 [data-step-id="information"] small { color: #707478 !important; font-size: 9px !important; line-height: 1.45 !important; } #booknetic_theme_8 [data-step-id="information"] .dp-info-privacy { display: flex !important; align-items: center !important; gap: 8px !important; margin: 5px 0 2px !important; padding: 10px 0 2px !important; color: #777B7E !important; border-top: 1px solid #1F1F1F !important; font-size: 9px !important; line-height: 1.35 !important; } /* ------------------------------------------------------------ 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="information"] ) .booknetic_appointment_container_body, #booknetic_theme_8:has( [data-step-id="information"][style*="display: block"] ) .booknetic_appointment_container_body { max-height: min(58dvh, 540px) !important; padding: 14px 14px 16px !important; } #booknetic_theme_8 [data-step-id="information"] .form-row:has(#bkntc_input_email)::before, #booknetic_theme_8 [data-step-id="information"] .form-row:has(#bkntc_input_name)::before { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } #booknetic_theme_8 [data-step-id="information"] input, #booknetic_theme_8 [data-step-id="information"] .select2-selection__rendered { font-size: 16px !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="information"] ) .booknetic_appointment_container_body, #booknetic_theme_8:has( [data-step-id="information"][style*="display: block"] ) .booknetic_appointment_container_body { max-height: 48vh !important; padding: 12px 15px 14px !important; } } /* ============================================================ v1.1.4 — EXISTING CUSTOMER / ADD NEW APPOINTMENT STATE ------------------------------------------------------------ Booknetic can reuse the same Information-step DOM when the customer chooses "Add new appointment". Core customer fields are hidden after email recognition, but a custom Gender field can otherwise remain visible. JS adds dp-info-existing-customer and marks the Gender groups below. Removing the class restores Booknetic's normal display. ============================================================ */ #booknetic_theme_8 [data-step-id="information"].dp-info-existing-customer .dp-info-hide-existing-customer { display: none !important; } /* * When Booknetic has recognised the customer there are no editable * "Your details" fields left, so remove the orphan editorial heading * and its rule. The Contact Details heading remains. */ #booknetic_theme_8 [data-step-id="information"].dp-info-existing-customer .form-row:has(#bkntc_input_name)::before, #booknetic_theme_8 [data-step-id="information"].dp-info-existing-customer .form-row:has(#bkntc_input_name)::after { content: none !important; display: none !important; } /* ============================================================ v1.1.5 — SETTINGS-CONTROLLED FIELD / ICON ALIGNMENT ------------------------------------------------------------ Actual saved values are output by the plugin after this file. These declarations simply document the four controllable items: text padding, icon left, icon vertical and icon size. ============================================================ */