/* ========================================================= SOUTHERN PURSUIT BOOKING FORMS Gravity Forms IDs: 2 (Transfers) and 3 (Van Hire) Shared presentation rules target both wrappers using :is(). Page layouts remain form-specific. ========================================================= */ /* ======================================== SAVE AND CONTINUE CONFIRMATION ======================================== */ :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message { color: #093b5c !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 20px !important; line-height: 1.5 !important; } /* Header */ :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message h1, :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message h2, :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message h3 { margin: 0 0 15px !important; color: #093b5c !important; font-family: "Source Serif 4", "Source Serif Pro", serif !important; font-size: 30px !important; font-weight: 700 !important; line-height: 1.2 !important; } /* Body text */ :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message p, :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message li, :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message label { color: #093b5c !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 20px !important; line-height: 1.5 !important; } /* Resume URL */ :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message a { color: #1f592e !important; font-size: 20px !important; overflow-wrap: anywhere; } /* Email label */ :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message label { display: block; margin-bottom: 8px !important; font-weight: 700 !important; } /* Email field */ :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message input[type="email"] { width: 100% !important; min-height: 50px !important; padding: 12px 14px !important; background: #ffffff !important; border: 2px solid #093b5c !important; border-radius: 10px 10px 10px 0 !important; color: #093b5c !important; font-size: 18px !important; } /* Send Link button */ :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message input[type="submit"], :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message button { min-height: 48px !important; margin-top: 18px !important; padding: 13px 28px !important; background: #1f592e !important; border: 2px solid #1f592e !important; border-radius: 10px 10px 10px 0 !important; box-shadow: none !important; color: #ffffff !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 16px !important; font-weight: 700 !important; cursor: pointer; } /* Space above the email section */ :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message_emailform { margin-top: 24px !important; padding: 0 !important; } /* Keep the email label aligned left */ :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message_emailform label { margin: 0 0 8px !important; padding: 0 !important; } /* Align Send Link with the email field */ :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message_emailform input[type="submit"], :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message_emailform button { display: block !important; margin: 18px 0 0 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message input[type="submit"]:hover, :is(#gform_wrapper_2, #gform_wrapper_3) .form_saved_message button:hover { opacity: 0.85; } /* ======================================== SAVE LINK SUCCESS MESSAGE ======================================== */ .form_saved_message_sent { padding: 25px 0 !important; color: #093b5c !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 20px !important; line-height: 1.5 !important; } /* Success heading */ .form_saved_message_sent h1, .form_saved_message_sent h2, .form_saved_message_sent h3, .form_saved_message_sent > span:first-child, .form_saved_message_sent > strong:first-child { display: block !important; margin: 0 0 14px !important; padding: 0 !important; color: #093b5c !important; font-family: "Source Serif 4", "Source Serif Pro", serif !important; font-size: 30px !important; font-weight: 700 !important; line-height: 1.2 !important; } /* Confirmation text */ .form_saved_message_sent p, .form_saved_message_sent div { color: #093b5c !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 20px !important; line-height: 1.5 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) { --sp-blue: #093b5c; --sp-green: #1f592e; --sp-cream: #f7f5ed; --sp-white: #ffffff; --sp-estimate-bg: #e6e4de; color: var(--sp-blue); font-family: "Source Sans Pro", sans-serif; } :is(#gform_wrapper_2, #gform_wrapper_3) *, :is(#gform_wrapper_2, #gform_wrapper_3) *::before, :is(#gform_wrapper_2, #gform_wrapper_3) *::after { box-sizing: border-box; } :is(#gform_wrapper_2, #gform_wrapper_3) .gform_heading { display: none !important; } /* ========================================================= GENERIC STEP HEADINGS Use page-specific classes: sp-trip-intro, sp-stops-intro, sp-hire-intro You may also add sp-step-intro to all heading HTML fields. ========================================================= */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-step-intro, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-trip-intro, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-stops-intro, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-intro, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-details-intro, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-review-intro { margin: 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-step-intro h2, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-step-intro h3, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-trip-intro h2, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-trip-intro h3, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-stops-intro h2, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-stops-intro h3, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-intro h2, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-intro h3, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-details-intro h2, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-details-intro h3, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-review-intro h2, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-review-intro h3 { margin: 0 0 7px !important; padding: 0 !important; color: var(--sp-blue) !important; font-family: "Source Serif 4", "Source Serif Pro", serif; font-size: 27px !important; font-weight: 700 !important; line-height: 1.15 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-step-intro p, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-trip-intro p, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-stops-intro p, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-intro p, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-details-intro p, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-review-intro p { margin: 0 !important; padding: 0 !important; color: #111111 !important; font-size: 16px !important; line-height: 1.4 !important; } /* ======================================== CUSTOM PROGRESS STEPS ======================================== */ :is(#gform_wrapper_2, #gform_wrapper_3) .gf_page_steps { display: flex !important; justify-content: center !important; align-items: flex-start !important; width: 100% !important; margin: 0 0 55px !important; padding: 0 !important; border: none !important; overflow: visible !important; } /* Individual step */ :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; flex: 0 0 120px !important; width: 120px !important; margin: 0 !important; text-align: center !important; opacity: 1 !important; } /* Connecting line */ :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step:not(:last-child)::after { content: "" !important; position: absolute !important; z-index: 0 !important; top: 20px !important; left: calc(50% + 25px) !important; width: calc(100% - 50px) !important; height: 2px !important; background: #093b5c !important; opacity: 1 !important; } /* Line following a completed step */ :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step_completed:not(:last-child)::after { background: #1f592e !important; } /* Step icon */ :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step_number { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 42px !important; width: 42px !important; height: 42px !important; margin: 0 auto !important; padding: 0 !important; background-color: #ffffff !important; background-image: url("https://sp.kaitaianettl.co.nz/wp-content/uploads/2026/07/upcoming-step.svg") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; border: none !important; border-radius: 0 !important; color: #093b5c !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; } /* Current step */ :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step_active .gf_step_number { background-image: url("https://sp.kaitaianettl.co.nz/wp-content/uploads/2026/07/current-step.svg") !important; color: #ffffff !important; } /* Completed step */ :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step_completed .gf_step_number { background-image: url("https://sp.kaitaianettl.co.nz/wp-content/uploads/2026/07/completed-step.svg") !important; color: #1f592e !important; font-size: 17px !important; } /* Remove Gravity Forms completed checkmark */ :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step_completed .gf_step_number::before, :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step_completed .gf_step_number::after { content: none !important; display: none !important; } /* Step label */ :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step_label { display: block !important; width: 100% !important; margin: 5px 0 0 !important; padding: 0 !important; color: #093b5c !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.1 !important; text-align: center !important; } /* Completed label */ :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step_completed .gf_step_label { color: #1f592e !important; } /* Current label */ :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step_active .gf_step_label { color: #1f592e !important; } /* Mobile */ @media only screen and (max-width: 600px) { :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step { flex-basis: 78px !important; width: 78px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step:not(:last-child)::after { left: calc(50% + 23px) !important; width: calc(100% - 46px) !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step_label { font-size: 9px !important; } } /* ========================================================= GENERIC LABELS AND INPUTS ========================================================= */ :is(#gform_wrapper_2, #gform_wrapper_3) .gfield_label { margin-bottom: 8px !important; color: var(--sp-blue) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) input[type="text"], :is(#gform_wrapper_2, #gform_wrapper_3) input[type="email"], :is(#gform_wrapper_2, #gform_wrapper_3) input[type="tel"], :is(#gform_wrapper_2, #gform_wrapper_3) input[type="number"], :is(#gform_wrapper_2, #gform_wrapper_3) input[type="date"], :is(#gform_wrapper_2, #gform_wrapper_3) input[type="time"], :is(#gform_wrapper_2, #gform_wrapper_3) select, :is(#gform_wrapper_2, #gform_wrapper_3) textarea { width: 100% !important; margin: 0 !important; padding: 12px 14px !important; background: var(--sp-white) !important; border: 2px solid var(--sp-blue) !important; border-radius: 10px 10px 10px 0 !important; box-shadow: none !important; color: var(--sp-blue) !important; font-family: "Source Sans Pro", sans-serif; font-size: 16px !important; line-height: 1.2 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) input[type="text"], :is(#gform_wrapper_2, #gform_wrapper_3) input[type="email"], :is(#gform_wrapper_2, #gform_wrapper_3) input[type="tel"], :is(#gform_wrapper_2, #gform_wrapper_3) input[type="number"], :is(#gform_wrapper_2, #gform_wrapper_3) input[type="date"], :is(#gform_wrapper_2, #gform_wrapper_3) input[type="time"], :is(#gform_wrapper_2, #gform_wrapper_3) select { min-height: 48px; } :is(#gform_wrapper_2, #gform_wrapper_3) input:focus, :is(#gform_wrapper_2, #gform_wrapper_3) select:focus, :is(#gform_wrapper_2, #gform_wrapper_3) textarea:focus { outline: none !important; border-color: var(--sp-green) !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-pickup-address textarea, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-dropoff-address textarea { min-height: 72px !important; resize: vertical; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-pickup-address .gform-field-label--type-sub, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-dropoff-address .gform-field-label--type-sub { display: none !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-passengers select, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-passengers input { max-width: 90px; } /* ========================================================= ROUTE ARROW ========================================================= */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-route-arrow .gfield_label { display: none !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-route-arrow-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0 auto 1px; background-color: transparent !important; background-image: url("https://sp.kaitaianettl.co.nz/wp-content/uploads/2026/07/arrow.svg") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; border-radius: 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-route-arrow-icon span, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-route-arrow-icon img, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-route-arrow-icon svg { display: none !important; } /* ========================================================= RADIO BUTTONS AS BUTTONS ========================================================= */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-trip-type .gfield_radio, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-excess-baggage .gfield_radio { display: flex !important; flex-wrap: wrap; gap: 16px; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-trip-type .gfield_radio { justify-content: center; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-trip-type .gchoice, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-excess-baggage .gchoice { position: relative; margin: 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-trip-type input[type="radio"], :is(#gform_wrapper_2, #gform_wrapper_3) .sp-excess-baggage input[type="radio"] { position: absolute !important; opacity: 0 !important; pointer-events: none; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-trip-type input[type="radio"] + label, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-excess-baggage input[type="radio"] + label { display: flex !important; align-items: center; justify-content: center; min-width: 120px; min-height: 44px; margin: 0 !important; padding: 10px 18px !important; background: var(--sp-white); border: 2px solid var(--sp-blue); border-radius: 10px 10px 10px 0; color: var(--sp-blue); font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-trip-type input[type="radio"]:checked + label, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-excess-baggage input[type="radio"]:checked + label { background: var(--sp-green); border-color: var(--sp-green); color: var(--sp-white); } /* ========================================================= GENERIC ESTIMATE SIDEBAR ========================================================= */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-estimate-sidebar { width: 280px !important; max-width: 280px !important; margin: 0 !important; align-self: start !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-estimate-sidebar > .gfield_label, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-estimate-sidebar > legend { display: none !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-estimate-sidebar .sp-booking-estimate__card { width: 100% !important; margin: 0 !important; padding: 20px !important; background: var(--sp-estimate-bg) !important; border-radius: 12px 12px 12px 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-estimate-sidebar .sp-booking-estimate__heading { margin: 0 !important; color: var(--sp-blue) !important; font-family: "Source Serif 4", "Source Serif Pro", serif; font-size: 25px !important; font-weight: 700 !important; line-height: 1.15 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-estimate-sidebar .sp-booking-estimate__rule { height: 2px !important; background: var(--sp-blue) !important; } :is(#gform_wrapper_2, #gform_wrapper_3) { --sp-estimate-bg: #f3f5f6; } /* Estimate card background */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-estimate-sidebar .sp-booking-estimate__card { background: var(--sp-estimate-bg) !important; } /* Green divider lines */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-estimate-sidebar .sp-booking-estimate__rule, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-estimate-sidebar hr { background: #1f592e !important; border-color: #1f592e !important; } /* All-caps estimate section headings */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-estimate-sidebar .sp-booking-estimate__section-title, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-estimate-sidebar .sp-booking-estimate__label, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-estimate-sidebar .sp-booking-estimate__eyebrow { color: #093b5c !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: 0 !important; } /* Keep the main estimate heading in Source Serif */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-estimate-sidebar .sp-booking-estimate__heading { font-family: "Source Serif 4", "Source Serif Pro", serif !important; text-transform: none !important; } /* TRANSFER and HIRE ITEMS headings */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-estimate-sidebar .sp-booking-estimate__section h4 { font-family: "Source Sans Pro", sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: 0 !important; color: #093b5c !important; } /* ========================================================= GENERIC SKIP STEP BUTTON ========================================================= */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-skip-step { margin: 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-skip-step-button { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; min-height: 48px; margin: 0; padding: 13px 24px; background: var(--sp-green); border: 2px solid var(--sp-green); border-radius: 10px 10px 10px 0; color: var(--sp-white); font-family: "Source Sans Pro", sans-serif; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; transition: opacity 0.2s ease; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-skip-step-button:hover { opacity: 0.85; } /* ========================================================= PAGE FOOTER AND BUTTONS ========================================================= */ :is(#gform_wrapper_2, #gform_wrapper_3) .gform_page_footer { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; align-items: center !important; width: 100% !important; margin-top: 32px !important; padding: 0 !important; border: none !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .gform_page_footer .gform_previous_button { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .gform_page_footer .gform_save_link { grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .gform_page_footer .gform_next_button, :is(#gform_wrapper_2, #gform_wrapper_3) .gform_page_footer .gform_button { grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .gform_next_button, :is(#gform_wrapper_2, #gform_wrapper_3) .gform_button, :is(#gform_wrapper_2, #gform_wrapper_3) .gform_save_link { min-height: 48px !important; margin: 0 !important; padding: 13px 28px !important; background: var(--sp-green) !important; border: 2px solid var(--sp-green) !important; border-radius: 10px 10px 10px 0 !important; box-shadow: none !important; color: var(--sp-white) !important; font-family: "Source Sans Pro", sans-serif; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; cursor: pointer; } :is(#gform_wrapper_2, #gform_wrapper_3) .gform_previous_button { min-height: 48px !important; margin: 0 !important; padding: 13px 22px !important; background: transparent !important; border: 2px solid var(--sp-green) !important; border-radius: 10px 10px 10px 0 !important; box-shadow: none !important; color: var(--sp-green) !important; font-family: "Source Sans Pro", sans-serif; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer; } :is(#gform_wrapper_2, #gform_wrapper_3) .gform_next_button:hover, :is(#gform_wrapper_2, #gform_wrapper_3) .gform_button:hover, :is(#gform_wrapper_2, #gform_wrapper_3) .gform_save_link:hover { opacity: 0.85; } :is(#gform_wrapper_2, #gform_wrapper_3) .gform_previous_button:hover { background: var(--sp-green) !important; color: var(--sp-white) !important; } /* ========================================================= DESKTOP GRID USED BY STEPS 1, 2 AND 3 ========================================================= */ @media only screen and (min-width: 981px) { #gform_page_2_1 .gform_fields, #gform_page_2_2 .gform_fields, #gform_page_2_3 .gform_fields { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr) 56px minmax(0, 1fr) minmax(0, 0.75fr) 280px !important; column-gap: 18px !important; row-gap: 22px !important; align-items: start !important; width: 100% !important; max-width: none !important; } /* ===================================================== STEP 1 LAYOUT ===================================================== */ #gform_page_2_1 .sp-trip-intro { grid-column: 1 / 6 !important; grid-row: 1 !important; } #gform_page_2_1 .sp-start-location { grid-column: 1 / 3 !important; grid-row: 2 !important; } #gform_page_2_1 .sp-route-arrow { grid-column: 3 !important; grid-row: 2 !important; align-self: end !important; } #gform_page_2_1 .sp-final-location { grid-column: 4 / 6 !important; grid-row: 2 !important; } #gform_page_2_1 .sp-trip-type { grid-column: 1 / 6 !important; grid-row: 3 !important; } #gform_page_2_1 .sp-pickup-address { grid-column: 1 / 3 !important; grid-row: 4 !important; } #gform_page_2_1 .sp-dropoff-address { grid-column: 4 / 6 !important; grid-row: 4 !important; } #gform_page_2_1 .sp-pickup-date { grid-column: 1 !important; grid-row: 5 !important; } #gform_page_2_1 .sp-pickup-time { grid-column: 2 !important; grid-row: 5 !important; } #gform_page_2_1 .sp-return-date { grid-column: 4 !important; grid-row: 5 !important; } #gform_page_2_1 .sp-return-time { grid-column: 5 !important; grid-row: 5 !important; } #gform_page_2_1 .sp-passengers { grid-column: 1 !important; grid-row: 6 !important; } #gform_page_2_1 .sp-excess-baggage { grid-column: 4 / 6 !important; grid-row: 6 !important; } #gform_page_2_1 .sp-estimate-sidebar { grid-column: 6 !important; grid-row: 1 / span 6 !important; justify-self: end !important; position: sticky !important; top: 120px !important; } /* ===================================================== STEP 2 LAYOUT ===================================================== */ #gform_page_2_2 .sp-stops-intro { grid-column: 1 / 4 !important; grid-row: 1 !important; } #gform_page_2_2 .sp-skip-step { grid-column: 4 / 6 !important; grid-row: 1 !important; justify-self: end !important; align-self: start !important; } #gform_page_2_2 .sp-extra-stops { grid-column: 1 / 6 !important; grid-row: 2 !important; width: 100% !important; } #gform_page_2_2 .sp-local-recommendations { grid-column: 1 / 6 !important; grid-row: 3 !important; width: 100% !important; } #gform_page_2_2 .sp-other-stop-details { grid-column: 1 / 6 !important; grid-row: 4 !important; width: 100% !important; } #gform_page_2_2 .sp-estimate-sidebar { grid-column: 6 !important; grid-row: 1 / span 4 !important; justify-self: end !important; position: sticky !important; top: 120px !important; } /* ===================================================== STEP 3 LAYOUT ===================================================== */ #gform_page_2_3 .sp-hire-intro { grid-column: 1 / 4 !important; grid-row: 1 !important; } #gform_page_2_3 .sp-skip-step { grid-column: 4 / 6 !important; grid-row: 1 !important; justify-self: end !important; align-self: start !important; } #gform_page_2_3 .sp-hire-items { grid-column: 1 / 6 !important; grid-row: 2 !important; width: 100% !important; min-width: 0 !important; } #gform_page_2_3 .sp-estimate-sidebar { grid-column: 6 !important; grid-row: 1 / 3 !important; justify-self: end !important; align-self: start !important; position: sticky !important; top: 120px !important; } } /* End desktop layout */ /* ========================================================= STEP 2 EXTRA STOP CHECKBOX CARDS ========================================================= */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-extra-stops .gfield_label, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-local-recommendations .gfield_label { color: var(--sp-blue) !important; font-size: 18px !important; font-weight: 700 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-extra-stops .gfield_checkbox { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 28px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-extra-stops .gchoice, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-local-recommendations .gchoice { position: relative; margin: 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-extra-stops input[type="checkbox"], :is(#gform_wrapper_2, #gform_wrapper_3) .sp-local-recommendations input[type="checkbox"] { position: absolute !important; opacity: 0 !important; pointer-events: none; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-extra-stops input[type="checkbox"] + label, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-local-recommendations input[type="checkbox"] + label { position: relative; display: flex !important; align-items: center; width: 100%; min-height: 50px; margin: 0 !important; padding: 10px 14px 10px 52px !important; background: var(--sp-white); border: 2px solid var(--sp-blue); border-radius: 10px 10px 10px 0; color: var(--sp-blue); font-size: 16px; font-weight: 500; cursor: pointer; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-extra-stops input[type="checkbox"] + label::before, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-local-recommendations input[type="checkbox"] + label::before { content: ""; position: absolute; left: 10px; top: 50%; width: 25px; height: 25px; background: var(--sp-white); border: 2px solid var(--sp-blue); transform: translateY(-50%); } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-extra-stops input[type="checkbox"]:checked + label::before, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-local-recommendations input[type="checkbox"]:checked + label::before { background: var(--sp-green); border-color: var(--sp-green); } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-extra-stops input[type="checkbox"]:checked + label::after, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-local-recommendations input[type="checkbox"]:checked + label::after { content: ""; position: absolute; left: 18px; top: 50%; width: 8px; height: 14px; border-right: 3px solid var(--sp-white); border-bottom: 3px solid var(--sp-white); transform: translateY(-60%) rotate(45deg); } /* ========================================================= LOCAL RECOMMENDATIONS CONDITIONAL PANEL Do not set display here, so Gravity Forms can hide it. ========================================================= */ :is(#gform_wrapper_2, #gform_wrapper_3) fieldset.sp-local-recommendations { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 18px 20px 20px !important; background: #f3f5f6 !important; border: none !important; border-left: 4px solid var(--sp-green) !important; border-radius: 0 10px 10px 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) fieldset.sp-local-recommendations > legend.gfield_label { float: left !important; width: 100% !important; margin: 0 0 16px !important; padding: 0 !important; color: var(--sp-blue) !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.2 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-local-recommendations .gfield_checkbox { clear: both !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: 1fr; gap: 12px 16px !important; width: 100% !important; margin: 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-local-recommendations .gchoice { display: flex !important; width: 100% !important; min-width: 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-local-recommendations input[type="checkbox"] + label { min-height: 58px !important; padding: 10px 12px 10px 52px !important; font-size: 15px !important; line-height: 1.3 !important; white-space: normal !important; } /* ========================================================= OTHER STOP DETAILS ========================================================= */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-other-stop-details input[type="text"], :is(#gform_wrapper_2, #gform_wrapper_3) .sp-other-stop-details textarea { width: 100% !important; background: var(--sp-white) !important; border: 2px solid var(--sp-blue) !important; border-radius: 10px 10px 10px 0 !important; color: var(--sp-blue) !important; } /* ========================================================= STEP 3 HIRE ITEMS ========================================================= */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items > .gfield_label, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items > legend { display: none !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__items { width: 100% !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__items { display: grid !important; gap: 9px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__item { width: 100% !important; background: var(--sp-white) !important; border: 2px solid var(--sp-blue) !important; border-radius: 10px 10px 10px 0 !important; box-shadow: none !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__item.is-selected { box-shadow: 0 0 0 1px var(--sp-blue) !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__row { display: grid !important; grid-template-columns: 52px minmax(160px, 1fr) minmax(130px, 170px) 78px !important; align-items: center !important; gap: 10px !important; min-height: 50px !important; padding: 5px 8px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__thumb { width: 52px !important; height: 40px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__thumb img { width: 100% !important; height: 100% !important; object-fit: contain !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__summary { min-width: 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__name { color: var(--sp-blue) !important; font-size: 14px !important; font-weight: 700 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__rates { color: var(--sp-blue) !important; font-size: 13px !important; font-weight: 600 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__extras { min-width: 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__extras legend, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__extra-label, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__counter-label, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__enquiry-label { color: var(--sp-blue) !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__step { background: var(--sp-white) !important; border-color: var(--sp-blue) !important; color: var(--sp-blue) !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__step:hover, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__step:focus-visible { background: var(--sp-blue) !important; color: var(--sp-white) !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__count { color: var(--sp-blue) !important; } /* ======================================== HIRE ITEMS MOBILE LAYOUT ======================================== */ @media only screen and (max-width: 600px) { /* Hide the Gravity Forms field title */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .gfield_label, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items > legend { display: none !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__items { gap: 9px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__row { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 82px !important; grid-template-rows: auto auto !important; column-gap: 9px !important; row-gap: 6px !important; min-height: 56px !important; padding: 7px 8px !important; } /* Image */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__thumb { grid-column: 1 !important; grid-row: 1 !important; width: 44px !important; height: 42px !important; } /* Item name and price */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__summary { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; min-width: 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__name { font-size: 13px !important; line-height: 1.15 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__rates { display: flex !important; flex-wrap: wrap !important; gap: 2px 10px !important; margin-top: 3px !important; font-size: 12px !important; line-height: 1.15 !important; } /* Counter stays top-right */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__counter { grid-column: 3 !important; grid-row: 1 !important; align-self: center !important; justify-self: end !important; min-width: 78px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__counter-label { font-size: 10px !important; white-space: nowrap !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__stepper { grid-template-columns: 24px 20px 24px !important; gap: 3px !important; } /* Extras move to their own row */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__extras { grid-column: 2 / 4 !important; grid-row: 2 !important; width: 100% !important; margin: 2px 0 0 !important; padding-top: 7px !important; border-top: 1px solid rgba(9, 59, 92, 0.2) !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__extras legend { margin-bottom: 5px !important; font-size: 11px !important; line-height: 1.2 !important; text-align: left !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__extra-options { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 8px 14px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__extra-option { display: flex !important; flex-direction: row-reverse !important; align-items: center !important; justify-content: flex-end !important; gap: 7px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__extra-label { font-size: 11px !important; line-height: 1.15 !important; text-align: left !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__extra-label small { display: inline !important; margin-left: 3px !important; font-size: 10px !important; } /* POA enquiry text box */ :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__enquiry { grid-column: 2 / 4 !important; grid-row: 2 !important; width: 100% !important; margin-top: 3px !important; } } /* ========================================================= TABLET ========================================================= */ @media only screen and (max-width: 980px) { :is(#gform_wrapper_2, #gform_wrapper_3) .gf_page_steps { justify-content: flex-start; overflow-x: auto; padding-bottom: 10px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step { min-width: 90px; } #gform_page_2_1 .gform_fields, #gform_page_2_2 .gform_fields, #gform_page_2_3 .gform_fields { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; } #gform_page_2_1 .gfield, #gform_page_2_2 .gfield, #gform_page_2_3 .gfield { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; max-width: none !important; } #gform_page_2_1 .sp-route-arrow { display: none !important; } #gform_page_2_1 .sp-estimate-sidebar, #gform_page_2_2 .sp-estimate-sidebar, #gform_page_2_3 .sp-estimate-sidebar { position: static !important; } #gform_page_2_2 .sp-skip-step, #gform_page_2_3 .sp-skip-step { justify-self: start !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-trip-type .gfield_radio, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-excess-baggage .gfield_radio { justify-content: flex-start; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-local-recommendations .gfield_checkbox { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__row { grid-template-columns: 48px minmax(0, 1fr) 76px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .gform_page_footer { grid-template-columns: repeat(3, 1fr) !important; gap: 12px; } } /* ========================================================= MOBILE ========================================================= */ @media only screen and (max-width: 700px) { :is(#gform_wrapper_2, #gform_wrapper_3) .sp-extra-stops .gfield_checkbox, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-local-recommendations .gfield_checkbox { grid-template-columns: 1fr !important; } } @media only screen and (max-width: 600px) { :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step { min-width: 75px; } :is(#gform_wrapper_2, #gform_wrapper_3) .gf_step_label { font-size: 9px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-trip-type .gchoice, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-excess-baggage .gchoice { width: 100%; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-trip-type input[type="radio"] + label, :is(#gform_wrapper_2, #gform_wrapper_3) .sp-excess-baggage input[type="radio"] + label { width: 100%; } :is(#gform_wrapper_2, #gform_wrapper_3) .gform_page_footer { display: flex !important; flex-wrap: wrap; justify-content: space-between; gap: 12px; } :is(#gform_wrapper_2, #gform_wrapper_3) .gform_previous_button, :is(#gform_wrapper_2, #gform_wrapper_3) .gform_next_button, :is(#gform_wrapper_2, #gform_wrapper_3) .gform_button { flex: 0 0 auto; } :is(#gform_wrapper_2, #gform_wrapper_3) .gform_save_link { order: 3; width: 100%; text-align: center; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__row { grid-template-columns: 42px minmax(0, 1fr) 70px !important; gap: 7px !important; padding: 5px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__thumb { width: 42px !important; height: 38px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__name { font-size: 13px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__rates { font-size: 12px !important; } } /* ========================================================= FINAL MOBILE HIRE ITEM OVERRIDES Kept last so these rules override the plugin defaults. ========================================================= */ /* Hide the custom Hire Items field title at every screen size */ :is(#gform_wrapper_2, #gform_wrapper_3) .gfield--type-sp_hire_items > .gfield_label, :is(#gform_wrapper_2, #gform_wrapper_3) .gfield--type-sp_hire_items > legend.gfield_label, :is(#gform_wrapper_2, #gform_wrapper_3) .gfield--type-sp_hire_items .gfield_label.gform-field-label, :is(#gform_wrapper_2, #gform_wrapper_3) .gfield.sp-hire-items > .gfield_label, :is(#gform_wrapper_2, #gform_wrapper_3) .gfield.sp-hire-items > legend.gfield_label { display: none !important; margin: 0 !important; padding: 0 !important; } @media only screen and (max-width: 600px) { :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__items { gap: 9px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__row { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 88px !important; grid-template-rows: auto auto !important; column-gap: 9px !important; row-gap: 7px !important; min-height: 58px !important; padding: 8px 14px 8px 8px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__thumb { grid-column: 1 !important; grid-row: 1 !important; width: 44px !important; height: 42px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__summary { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; min-width: 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__name { font-size: 13px !important; line-height: 1.15 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__rates { display: flex !important; flex-wrap: wrap !important; gap: 2px 10px !important; margin-top: 3px !important; font-size: 12px !important; line-height: 1.15 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__counter { grid-column: 3 !important; grid-row: 1 !important; align-self: center !important; justify-self: end !important; width: 84px !important; min-width: 84px !important; padding: 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__counter-label { font-size: 10px !important; white-space: nowrap !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__stepper { grid-template-columns: 24px 20px 24px !important; justify-content: end !important; gap: 4px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__step { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; padding: 0 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__extras { grid-column: 2 / 4 !important; grid-row: 2 !important; width: 100% !important; margin: 2px 0 0 !important; padding-top: 7px !important; border-top: 1px solid rgba(9, 59, 92, 0.2) !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__extras legend { margin-bottom: 5px !important; font-size: 11px !important; line-height: 1.2 !important; text-align: left !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__extra-options { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 8px 14px !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .sp-hire-items .sp-hire-picker__enquiry { grid-column: 2 / 4 !important; grid-row: 2 !important; width: 100% !important; margin-top: 3px !important; } } /* ========================================================= STEP 4 DETAILS LAYOUT ========================================================= */ @media only screen and (min-width: 981px) { #gform_page_2_4 .gform_fields { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr) 56px minmax(0, 1fr) minmax(0, 0.75fr) 280px !important; column-gap: 18px !important; row-gap: 22px !important; align-items: start !important; width: 100% !important; max-width: none !important; } /* Heading */ #gform_page_2_4 .sp-details-intro { grid-column: 1 / 6 !important; grid-row: 1 !important; } /* Name */ #gform_page_2_4 .sp-details-name { grid-column: 1 / 3 !important; grid-row: 2 !important; } /* Phone */ #gform_page_2_4 .sp-details-phone { grid-column: 4 / 6 !important; grid-row: 2 !important; } /* Email */ #gform_page_2_4 .sp-details-email { grid-column: 1 / 6 !important; grid-row: 3 !important; } /* Notes */ #gform_page_2_4 .sp-details-notes { grid-column: 1 / 6 !important; grid-row: 4 !important; } /* Estimate on the right */ #gform_page_2_4 .sp-estimate-sidebar { grid-column: 6 !important; grid-row: 1 / 5 !important; justify-self: end !important; align-self: start !important; position: sticky !important; top: 120px !important; } } /* Tablet and mobile */ @media only screen and (max-width: 980px) { #gform_page_2_4 .gform_fields { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; } #gform_page_2_4 .gfield { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; max-width: none !important; } #gform_page_2_4 .sp-estimate-sidebar { position: static !important; } } /* ========================================================= STEP 5 REVIEW AND SUBMIT ========================================================= */ #gform_page_2_5 .gform_fields { display: grid !important; grid-template-columns: 1fr !important; gap: 22px !important; width: 100% !important; } /* Centre the heading */ #gform_page_2_5 .sp-review-intro { grid-column: 1 !important; justify-self: center !important; width: 100% !important; text-align: center !important; } /* Larger centred estimate */ #gform_page_2_5 .sp-final-estimate { grid-column: 1 !important; justify-self: center !important; width: 700px !important; max-width: 100% !important; margin: 0 auto !important; position: static !important; } /* Make the estimate card larger */ #gform_page_2_5 .sp-final-estimate .sp-booking-estimate__card { width: 100% !important; padding: 28px 32px !important; } /* Slightly larger main heading */ #gform_page_2_5 .sp-final-estimate .sp-booking-estimate__heading { font-size: 28px !important; } /* Tablet and mobile */ @media only screen and (max-width: 980px) { #gform_page_2_5 .sp-final-estimate { width: 100% !important; max-width: 700px !important; } #gform_page_2_5 .sp-final-estimate .sp-booking-estimate__card { padding: 22px !important; } } /* ========================================================= FORM 3 ONLY: VAN HIRE FIELD DETAILS ========================================================= */ #gform_wrapper_3 textarea { min-height: 120px !important; resize: vertical; } #gform_wrapper_3 .gfield_description { margin-top: 7px !important; color: #222222 !important; font-size: 13px !important; line-height: 1.35 !important; } /* ========================================================= FORM 3 ONLY: DESKTOP PAGE LAYOUTS ========================================================= */ @media only screen and (min-width: 981px) { #gform_page_3_1 .gform_fields, #gform_page_3_2 .gform_fields, #gform_page_3_3 .gform_fields { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr) 56px minmax(0, 1fr) minmax(0, 0.75fr) 280px !important; column-gap: 18px !important; row-gap: 22px !important; align-items: start !important; width: 100% !important; max-width: none !important; } /* Step 1: Trip */ #gform_page_3_1 .sp-trip-intro { grid-column: 1 / 6 !important; grid-row: 1 !important; } #gform_page_3_1 .sp-trip-type { grid-column: 1 / 3 !important; grid-row: 2 !important; } #gform_page_3_1 .sp-pickup-date { grid-column: 1 !important; grid-row: 4 !important; } #gform_page_3_1 .sp-pickup-time { grid-column: 2 !important; grid-row: 4 !important; } #gform_page_3_1 .sp-return-date { grid-column: 4 !important; grid-row: 4 !important; } #gform_page_3_1 .sp-return-time { grid-column: 5 !important; grid-row: 4 !important; } #gform_page_3_1 .sp-passengers { grid-column: 4 / 6 !important; grid-row: 2 !important; align-self: start !important; } /* Conditional message shown when With Driver is selected */ #gform_page_3_1 .sp-driver-note { grid-column: 1 / 3 !important; grid-row: 3 !important; width: 100% !important; max-width: 100% !important; margin: -8px 0 0 !important; padding: 12px 14px !important; background: #f3f5f6 !important; border-left: 4px solid var(--sp-green) !important; border-radius: 0 10px 10px 0 !important; color: var(--sp-blue) !important; font-size: 14px !important; line-height: 1.4 !important; overflow-wrap: anywhere !important; } #gform_page_3_1 .sp-driver-note p { width: 100% !important; max-width: 100% !important; margin: 0 !important; overflow-wrap: anywhere !important; } #gform_page_3_1 .sp-trip-notes, #gform_page_3_1 .sp-trip-wide, #gform_page_3_1 .gfield--type-html:not(.sp-trip-intro):not(.sp-driver-note) { grid-column: 1 / 6 !important; } #gform_page_3_1 .sp-estimate-sidebar { grid-column: 6 !important; grid-row: 1 / span 8 !important; justify-self: end !important; position: sticky !important; top: 120px !important; } /* Step 2: Hire */ #gform_page_3_2 .sp-hire-intro { grid-column: 1 / 4 !important; grid-row: 1 !important; } #gform_page_3_2 .sp-skip-step { grid-column: 4 / 6 !important; grid-row: 1 !important; justify-self: end !important; align-self: start !important; } #gform_page_3_2 .sp-hire-items { grid-column: 1 / 6 !important; grid-row: 2 !important; width: 100% !important; min-width: 0 !important; } #gform_page_3_2 .sp-estimate-sidebar { grid-column: 6 !important; grid-row: 1 / 3 !important; justify-self: end !important; align-self: start !important; position: sticky !important; top: 120px !important; } /* Step 3: Details */ #gform_page_3_3 .sp-details-intro { grid-column: 1 / 6 !important; grid-row: 1 !important; } #gform_page_3_3 .sp-details-name { grid-column: 1 / 3 !important; grid-row: 2 !important; } #gform_page_3_3 .sp-details-birthday, #gform_page_3_3 #field_3_71 { grid-column: 4 / 6 !important; grid-row: 2 !important; } #gform_page_3_3 .sp-details-phone { grid-column: 1 / 3 !important; grid-row: 3 !important; } #gform_page_3_3 .sp-details-email { grid-column: 4 / 6 !important; grid-row: 3 !important; } #gform_page_3_3 .sp-details-licence { grid-column: 1 / 6 !important; grid-row: 4 !important; } #gform_page_3_3 .sp-details-notes, #gform_page_3_3 .sp-details-consent, #gform_page_3_3 .sp-details-wide { grid-column: 1 / 6 !important; } #gform_page_3_3 .sp-estimate-sidebar { grid-column: 6 !important; grid-row: 1 / span 10 !important; justify-self: end !important; align-self: start !important; position: sticky !important; top: 120px !important; } } /* ========================================================= FORM 3 ONLY: TABLET AND MOBILE PAGE FLOW ========================================================= */ @media only screen and (max-width: 980px) { #gform_page_3_1 .gform_fields, #gform_page_3_2 .gform_fields, #gform_page_3_3 .gform_fields { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; } #gform_page_3_1 .gfield, #gform_page_3_2 .gfield, #gform_page_3_3 .gfield { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; max-width: none !important; } #gform_page_3_1 .sp-estimate-sidebar, #gform_page_3_2 .sp-estimate-sidebar, #gform_page_3_3 .sp-estimate-sidebar { position: static !important; width: 100% !important; max-width: none !important; } } /* ========================================================= FORM 3: LICENCE UPLOAD Add CSS class: sp-licence-upload ========================================================= */ #gform_wrapper_3 .sp-licence-upload { width: 100% !important; margin: 0 !important; padding: 20px 22px !important; background: #f3f5f6 !important; border: none !important; border-left: 4px solid var(--sp-green) !important; border-radius: 0 12px 12px 0 !important; } #gform_wrapper_3 .sp-licence-upload > .gfield_label, #gform_wrapper_3 .sp-licence-upload > legend.gfield_label { margin: 0 0 8px !important; color: var(--sp-blue) !important; font-family: "Source Serif 4", "Source Serif Pro", serif !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.2 !important; } #gform_wrapper_3 .sp-licence-upload .gfield_description, #gform_wrapper_3 .sp-licence-upload .gform_fileupload_rules { margin: 7px 0 0 !important; color: #222222 !important; font-size: 13px !important; line-height: 1.4 !important; } #gform_wrapper_3 .sp-licence-upload .ginput_container_fileupload { width: 100% !important; margin-top: 12px !important; } /* Standard single-file upload */ #gform_wrapper_3 .sp-licence-upload input[type="file"] { width: 100% !important; min-height: 52px !important; margin: 0 !important; padding: 7px !important; background: var(--sp-white) !important; border: 2px solid var(--sp-blue) !important; border-radius: 10px 10px 10px 0 !important; color: var(--sp-blue) !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 14px !important; } #gform_wrapper_3 .sp-licence-upload input[type="file"]::file-selector-button { min-height: 36px !important; margin: 0 12px 0 0 !important; padding: 8px 16px !important; background: var(--sp-green) !important; border: 2px solid var(--sp-green) !important; border-radius: 8px 8px 8px 0 !important; color: var(--sp-white) !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; } /* Gravity Forms multi-file drag-and-drop upload */ #gform_wrapper_3 .sp-licence-upload .gform_drop_area { width: 100% !important; margin: 12px 0 0 !important; padding: 24px 18px !important; background: var(--sp-white) !important; border: 2px dashed var(--sp-blue) !important; border-radius: 10px 10px 10px 0 !important; text-align: center !important; } #gform_wrapper_3 .sp-licence-upload .gform_drop_instructions { display: block !important; margin: 0 0 10px !important; color: var(--sp-blue) !important; font-size: 15px !important; font-weight: 600 !important; } #gform_wrapper_3 .sp-licence-upload .gform_button_select_files { min-height: 42px !important; margin: 0 !important; padding: 10px 20px !important; background: var(--sp-green) !important; border: 2px solid var(--sp-green) !important; border-radius: 10px 10px 10px 0 !important; color: var(--sp-white) !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; } #gform_wrapper_3 .sp-licence-upload .ginput_preview { margin-top: 10px !important; padding: 10px 12px !important; background: var(--sp-white) !important; border: 1px solid rgba(9, 59, 92, 0.25) !important; border-radius: 8px 8px 8px 0 !important; color: var(--sp-blue) !important; } /* ========================================================= FORM 3: STEP 4 REVIEW AND SUBMIT Heading: sp-step-intro sp-review-intro Estimate: sp-estimate-sidebar sp-final-estimate Consent: sp-review-consent ========================================================= */ @media only screen and (min-width: 981px) { #gform_page_3_3 .sp-licence-upload { grid-column: 1 / 6 !important; grid-row: 5 !important; } #gform_page_3_3 .sp-details-notes { grid-column: 1 / 6 !important; grid-row: 6 !important; } #gform_page_3_4 .gform_fields { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 700px) minmax(0, 1fr) !important; column-gap: 18px !important; row-gap: 22px !important; align-items: start !important; width: 100% !important; max-width: none !important; } #gform_page_3_4 .sp-review-intro { grid-column: 2 !important; grid-row: 1 !important; text-align: center !important; } #gform_page_3_4 .sp-final-estimate { grid-column: 2 !important; grid-row: 2 !important; justify-self: center !important; } #gform_page_3_4 .sp-review-consent { grid-column: 2 !important; grid-row: 3 !important; } #gform_page_3_4 .sp-review-wide, #gform_page_3_4 .gfield--type-html:not(.sp-review-intro) { grid-column: 2 !important; } } #gform_page_3_4 .sp-final-estimate { width: 700px !important; max-width: 100% !important; margin: 0 auto !important; } #gform_page_3_4 .sp-final-estimate .sp-booking-estimate__card { padding: 28px 32px !important; } #gform_page_3_4 .sp-final-estimate .sp-booking-estimate__heading { font-size: 28px !important; } /* Required consent statement */ #gform_wrapper_3 .sp-review-consent { width: 100% !important; margin: 0 !important; padding: 18px 20px !important; background: #f3f5f6 !important; border: none !important; border-left: 4px solid var(--sp-green) !important; border-radius: 0 10px 10px 0 !important; } #gform_wrapper_3 fieldset.sp-review-consent { display: block !important; min-width: 0 !important; } #gform_wrapper_3 .sp-review-consent > .gfield_label, #gform_wrapper_3 .sp-review-consent > legend.gfield_label { float: left !important; display: block !important; width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; color: var(--sp-blue) !important; font-family: "Source Serif 4", "Source Serif Pro", serif !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.2 !important; } #gform_wrapper_3 .sp-review-consent .ginput_container_consent { clear: both !important; } #gform_wrapper_3 .sp-review-consent .ginput_container_consent { display: grid !important; grid-template-columns: 24px minmax(0, 1fr) !important; align-items: start !important; column-gap: 11px !important; } #gform_wrapper_3 .sp-review-consent input[type="checkbox"] { width: 22px !important; height: 22px !important; margin: 2px 0 0 !important; accent-color: var(--sp-green) !important; cursor: pointer !important; } #gform_wrapper_3 .sp-review-consent .gfield_consent_label, #gform_wrapper_3 .sp-review-consent label { margin: 0 !important; color: var(--sp-blue) !important; font-size: 15px !important; line-height: 1.45 !important; cursor: pointer !important; } #gform_wrapper_3 .sp-review-consent .gfield_required { color: var(--sp-green) !important; } /* ========================================================= FORM 3: STEP 4 TABLET AND MOBILE ========================================================= */ @media only screen and (max-width: 980px) { #gform_page_3_4 .gform_fields { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; } #gform_page_3_4 .gfield { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; max-width: none !important; } #gform_page_3_4 .sp-final-estimate { width: 100% !important; max-width: 700px !important; } #gform_page_3_4 .sp-final-estimate .sp-booking-estimate__card { padding: 22px !important; } } @media only screen and (max-width: 600px) { #gform_wrapper_3 .sp-licence-upload, #gform_wrapper_3 .sp-review-consent { padding: 16px !important; } #gform_wrapper_3 .sp-licence-upload input[type="file"] { font-size: 12px !important; } #gform_wrapper_3 .sp-licence-upload input[type="file"]::file-selector-button { margin-right: 8px !important; padding: 8px 11px !important; font-size: 12px !important; } #gform_page_3_4 .sp-final-estimate .sp-booking-estimate__card { padding: 18px !important; } } /* Form 3 With Driver conditional message */ @media only screen and (max-width: 980px) { #gform_wrapper_3 .sp-driver-note { width: 100% !important; margin: -6px 0 0 !important; padding: 12px 14px !important; background: #f3f5f6 !important; border-left: 4px solid var(--sp-green) !important; border-radius: 0 10px 10px 0 !important; color: var(--sp-blue) !important; font-size: 14px !important; line-height: 1.4 !important; } #gform_wrapper_3 .sp-driver-note p { margin: 0 !important; } } /* Form 3 Hire Type buttons align left */ #gform_wrapper_3 .sp-trip-type .gfield_radio { justify-content: flex-start !important; } /* ========================================================= FORMS 2 AND 3: SUBMISSION CONFIRMATION PAGE ========================================================= */ #gform_confirmation_wrapper_2, #gform_confirmation_wrapper_3 { width: 100% !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; } #gform_confirmation_message_2, #gform_confirmation_message_3, #gform_confirmation_wrapper_2 .gform_confirmation_message, #gform_confirmation_wrapper_3 .gform_confirmation_message { width: 100% !important; max-width: 760px !important; margin: 0 auto !important; color: #093b5c !important; font-family: "Source Sans Pro", sans-serif !important; } .sp-booking-confirmation { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; min-height: calc(75svh - 112px) !important; margin: 0 auto !important; padding: 70px 24px !important; box-sizing: border-box !important; text-align: center !important; } .sp-booking-confirmation > *:not(.sp-confirmation-button) { width: 100% !important; max-width: 760px !important; } .sp-booking-confirmation .sp-confirmation-button { width: auto !important; max-width: none !important; } .sp-booking-confirmation h1, .sp-booking-confirmation h2 { margin: 0 0 24px !important; padding: 0 !important; color: #093b5c !important; font-family: "Source Serif 4", "Source Serif Pro", serif !important; font-size: clamp(38px, 5vw, 58px) !important; font-weight: 700 !important; line-height: 1.08 !important; } .sp-booking-confirmation p { max-width: 680px !important; margin: 0 auto 14px !important; padding: 0 !important; color: #093b5c !important; font-family: "Source Sans Pro", sans-serif !important; font-size: clamp(18px, 2vw, 22px) !important; line-height: 1.5 !important; } .sp-booking-confirmation .sp-confirmation-prompt { margin-top: 38px !important; font-weight: 700 !important; } .sp-booking-confirmation .sp-confirmation-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 52px !important; margin: 12px auto 0 !important; padding: 14px 28px !important; background: #1f592e !important; border: 2px solid #1f592e !important; border-radius: 10px 10px 10px 0 !important; color: #ffffff !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.1 !important; text-decoration: none !important; transition: opacity 0.2s ease !important; } .sp-booking-confirmation .sp-confirmation-button:hover, .sp-booking-confirmation .sp-confirmation-button:focus { color: #ffffff !important; opacity: 0.85 !important; text-decoration: none !important; } @media only screen and (max-width: 980px) { .sp-booking-confirmation { min-height: calc(50svh - 125px) !important; padding: 60px 20px !important; } } @media only screen and (max-width: 600px) { .sp-booking-confirmation { min-height: calc(50svh - 110px) !important; padding: 45px 18px !important; } .sp-booking-confirmation h1, .sp-booking-confirmation h2 { font-size: 38px !important; } .sp-booking-confirmation p { font-size: 18px !important; } .sp-booking-confirmation .sp-confirmation-button { width: 100% !important; max-width: 340px !important; } } /* Hide the “(Required)” text on both booking forms */ :is(#gform_wrapper_2, #gform_wrapper_3) .gfield_required_text { display: none !important; } /* ========================================================= STEP 1 DATE / TIME FIELD OVERRIDES Forms 2 + 3 only ========================================================= */ /* ========================================================= SHARED TIME FIELD RULES ========================================================= */ /* Remove Gravity Forms time separators */ :is(#gform_wrapper_2, #gform_wrapper_3) :is(.sp-pickup-time, .sp-return-time) .gfield_time_hour i, :is(#gform_wrapper_2, #gform_wrapper_3) :is(.sp-pickup-time, .sp-return-time) .hour_minute_colon, :is(#gform_wrapper_2, #gform_wrapper_3) :is(.sp-pickup-time, .sp-return-time) .gfield_time_hour::before, :is(#gform_wrapper_2, #gform_wrapper_3) :is(.sp-pickup-time, .sp-return-time) .gfield_time_hour::after { display: none !important; content: none !important; width: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* Hide Gravity Forms HH / MM sub-labels */ :is(#gform_wrapper_2, #gform_wrapper_3) :is(.sp-pickup-time, .sp-return-time) .gform-field-label--type-sub { display: none !important; } /* ========================================================= DESKTOP 981px+ ========================================================= */ @media only screen and (min-width: 981px) { /* Smaller date columns, larger time columns */ #gform_page_2_1 .gform_fields, #gform_page_3_1 .gform_fields { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) 56px minmax(0, 0.8fr) minmax(0, 1.2fr) 280px !important; } /* Keep HH, MM and AM/PM horizontal */ :is(#gform_page_2_1, #gform_page_3_1) :is(.sp-pickup-time, .sp-return-time) .ginput_complex.ginput_container_time { display: flex !important; flex-flow: row nowrap !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: none !important; gap: 0 !important; } /* Reset Gravity Forms sizing */ :is(#gform_page_2_1, #gform_page_3_1) :is(.sp-pickup-time, .sp-return-time) :is( .gfield_time_hour, .gfield_time_minute, .gfield_time_ampm ) { display: block !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* HH and MM */ :is(#gform_page_2_1, #gform_page_3_1) :is(.sp-pickup-time, .sp-return-time) :is(.gfield_time_hour, .gfield_time_minute) input { width: 44px !important; min-width: 44px !important; max-width: 44px !important; padding-left: 9px !important; padding-right: 6px !important; } /* Space before MM */ :is(#gform_page_2_1, #gform_page_3_1) :is(.sp-pickup-time, .sp-return-time) .gfield_time_minute { margin-left: 8px !important; } /* AM / PM wrapper */ :is(#gform_page_2_1, #gform_page_3_1) :is(.sp-pickup-time, .sp-return-time) .gfield_time_ampm { flex: 0 0 76px !important; width: 76px !important; min-width: 76px !important; max-width: 76px !important; margin-left: 8px !important; } /* AM / PM select */ :is(#gform_page_2_1, #gform_page_3_1) :is(.sp-pickup-time, .sp-return-time) .gfield_time_ampm select { width: 76px !important; min-width: 76px !important; max-width: 76px !important; padding-left: 9px !important; padding-right: 7px !important; } } /* ========================================================= TABLET + MOBILE TIME FIELDS 980px and below ========================================================= */ @media only screen and (max-width: 980px) { /* Keep complete time field horizontal and full width */ :is(#gform_wrapper_2, #gform_wrapper_3) :is(.sp-pickup-time, .sp-return-time) .ginput_complex.ginput_container_time { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; gap: 0 !important; } /* HH wrapper */ :is(#gform_wrapper_2, #gform_wrapper_3) :is(.sp-pickup-time, .sp-return-time) .gfield_time_hour { display: block !important; flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* MM wrapper, add spacing */ :is(#gform_wrapper_2, #gform_wrapper_3) :is(.sp-pickup-time, .sp-return-time) .gfield_time_minute { display: block !important; flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: none !important; margin: 0 0 0 8px !important; padding: 0 !important; } /* AM / PM wrapper, add spacing */ :is(#gform_wrapper_2, #gform_wrapper_3) :is(.sp-pickup-time, .sp-return-time) .gfield_time_ampm { display: block !important; flex: 0 0 88px !important; width: 88px !important; min-width: 88px !important; max-width: 88px !important; margin: 0 0 0 8px !important; padding: 0 !important; } /* HH + MM inputs fill their sections */ :is(#gform_wrapper_2, #gform_wrapper_3) :is(.sp-pickup-time, .sp-return-time) .gfield_time_hour input, :is(#gform_wrapper_2, #gform_wrapper_3) :is(.sp-pickup-time, .sp-return-time) .gfield_time_minute input { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* AM / PM */ :is(#gform_wrapper_2, #gform_wrapper_3) :is(.sp-pickup-time, .sp-return-time) .gfield_time_ampm select { display: block !important; width: 88px !important; min-width: 88px !important; max-width: 88px !important; margin: 0 !important; padding-left: 10px !important; padding-right: 8px !important; box-sizing: border-box !important; } /* Remove separator */ :is(#gform_wrapper_2, #gform_wrapper_3) :is(.sp-pickup-time, .sp-return-time) .gfield_time_hour i, :is(#gform_wrapper_2, #gform_wrapper_3) :is(.sp-pickup-time, .sp-return-time) .hour_minute_colon { display: none !important; } } /* ========================================================= GRAVITY FORMS 3.0 DATE PICKER ========================================================= */ :is(#gform_wrapper_2, #gform_wrapper_3) .gfield--input-type-datepicker .ginput_container_date { position: relative !important; display: block !important; width: 100% !important; } /* Date input fills its column again */ :is(#gform_wrapper_2, #gform_wrapper_3) .gfield--input-type-datepicker input.gform-datepicker { width: 100% !important; min-width: 0 !important; min-height: 48px !important; padding: 12px 46px 12px 14px !important; background: #ffffff !important; border: 2px solid #093b5c !important; border-radius: 10px 10px 10px 0 !important; color: #093b5c !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 16px !important; } /* New GF calendar button sits inside the input */ :is(#gform_wrapper_2, #gform_wrapper_3) .gform-datepicker-toggle { position: absolute !important; z-index: 3 !important; top: 50% !important; right: 7px !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; background: transparent !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; color: #093b5c !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .gform-datepicker-toggle:hover { background: #f3f5f6 !important; } :is(#gform_wrapper_2, #gform_wrapper_3) .gform-datepicker-toggle .dashicons { width: 20px !important; height: 20px !important; font-size: 20px !important; line-height: 20px !important; } /* ========================================================= DATEPICKER LAYERING ========================================================= */ .sp-booking-form-section { position: relative !important; z-index: 50 !important; overflow: visible !important; } .sp-booking-form-section .et_pb_row, .sp-booking-form-section .et_pb_column, .sp-booking-form-section .et_pb_module, .sp-booking-form-section .et_pb_module_inner, .sp-booking-form-section .gform_wrapper, .sp-booking-form-section .gform_body, .sp-booking-form-section .gform_page, .sp-booking-form-section .gform_fields, .sp-booking-form-section .gfield, .sp-booking-form-section .ginput_container { overflow: visible !important; } /* Keep footer underneath an open calendar */ .et-l--footer { position: relative !important; z-index: 1 !important; } /* ========================================================= GRAVITY FORMS 3.0 BODY-LEVEL DATEPICKER Calendar is moved under to escape Divi stacking. ========================================================= */ /* Calendar popup */ body > div[id^="DC"][role="application"] { width: 360px !important; max-width: calc(100vw - 20px) !important; padding: 14px !important; background: #ffffff !important; border: 1px solid #d8e0e5 !important; border-radius: 10px !important; box-shadow: 0 8px 30px rgba(9, 59, 92, 0.18) !important; color: #093b5c !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 14px !important; box-sizing: border-box !important; overflow: hidden !important; } /* Calendar table */ body > div[id^="DC"][role="application"] table.calendar { width: 100% !important; margin: 0 !important; border: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; background: #ffffff !important; } /* Remove generic table borders */ body > div[id^="DC"][role="application"] table.calendar, body > div[id^="DC"][role="application"] table.calendar tbody, body > div[id^="DC"][role="application"] table.calendar tr, body > div[id^="DC"][role="application"] table.calendar th, body > div[id^="DC"][role="application"] table.calendar td { border: 0 !important; background: transparent !important; } /* Year and month rows */ body > div[id^="DC"][role="application"] .yearSelector td, body > div[id^="DC"][role="application"] .monthSelector td { height: 48px !important; padding: 4px !important; vertical-align: middle !important; } /* Year and month dropdowns */ body > div[id^="DC"][role="application"] select.nav.current { width: 100% !important; height: 40px !important; margin: 0 !important; padding: 7px 34px 7px 12px !important; background-color: #ffffff !important; border: 2px solid #093b5c !important; border-radius: 8px 8px 8px 0 !important; color: #093b5c !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 14px !important; box-shadow: none !important; } /* Previous / next arrows */ body > div[id^="DC"][role="application"] td.nav.prev, body > div[id^="DC"][role="application"] td.nav.next { width: 42px !important; height: 42px !important; color: #093b5c !important; font-size: 19px !important; font-weight: 700 !important; text-align: center !important; vertical-align: middle !important; cursor: pointer !important; } /* Weekday headings */ body > div[id^="DC"][role="application"] th.week { height: 42px !important; padding: 5px 0 !important; color: #093b5c !important; font-size: 12px !important; font-weight: 700 !important; text-align: center !important; } /* Day cells */ body > div[id^="DC"][role="application"] td.day, body > div[id^="DC"][role="application"] td.empty { position: relative !important; width: 14.285% !important; height: 44px !important; padding: 0 !important; color: #093b5c !important; font-size: 13px !important; text-align: center !important; vertical-align: middle !important; } /* Clickable dates */ body > div[id^="DC"][role="application"] td.day { cursor: pointer !important; border-radius: 50% !important; } /* Date number */ body > div[id^="DC"][role="application"] td.day > span { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; margin: auto !important; border-radius: 50% !important; } /* Hover */ body > div[id^="DC"][role="application"] td.day:hover > span { background: #f3f5f6 !important; } /* Today / selected date */ body > div[id^="DC"][role="application"] td.dayToday > span, body > div[id^="DC"][role="application"] td.dayMarked > span, body > div[id^="DC"][role="application"] td.selected > span { background: #1f592e !important; color: #ffffff !important; } /* Hide the visual help message */ body > div[id^="DC"][role="application"] .monthMessage { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; } /* ========================================================= DATE INPUTS ========================================================= */ /* Hide Gravity Forms calendar icon completely */ :is(#gform_wrapper_2, #gform_wrapper_3) .gform-datepicker-toggle { display: none !important; } /* Remove space previously reserved for icon */ :is(#gform_wrapper_2, #gform_wrapper_3) .gfield--input-type-datepicker input.gform-datepicker { width: 100% !important; padding-right: 14px !important; cursor: pointer !important; } /* Mobile */ @media only screen and (max-width: 600px) { body > div[id^="DC"][role="application"] { width: calc(100vw - 20px) !important; max-width: 360px !important; padding: 10px !important; } body > div[id^="DC"][role="application"] td.day, body > div[id^="DC"][role="application"] td.empty { height: 41px !important; } body > div[id^="DC"][role="application"] td.day > span { width: 34px !important; height: 34px !important; } } /* ========================================================= GRAVITY FORMS 3 DATEPICKER ========================================================= */ /* Outer datepicker wrapper */ .gform-datepicker-calendar { z-index: 9999999 !important; font-family: "Source Sans Pro", sans-serif !important; color: #093b5c !important; } /* Actual popup */ .gform-datepicker-calendar > [role="application"] { width: 370px !important; max-width: calc(100vw - 20px) !important; padding: 14px 16px 16px !important; background: #ffffff !important; border: 1px solid #d9e0e4 !important; border-radius: 10px !important; box-shadow: 0 8px 25px rgba(9, 59, 92, 0.18) !important; color: #093b5c !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 14px !important; box-sizing: border-box !important; } /* ========================================================= CALENDAR TABLE RESET ========================================================= */ .gform-datepicker-calendar table.calendar { width: 100% !important; margin: 0 !important; border: 0 !important; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; background: #ffffff !important; font-family: "Source Sans Pro", sans-serif !important; color: #093b5c !important; } .gform-datepicker-calendar table.calendar tbody, .gform-datepicker-calendar table.calendar tr, .gform-datepicker-calendar table.calendar th, .gform-datepicker-calendar table.calendar td { border: 0 !important; background: transparent !important; } /* ========================================================= YEAR + MONTH CONTROLS ========================================================= */ .gform-datepicker-calendar .yearSelector, .gform-datepicker-calendar .monthSelector { border-bottom: 1px solid #e3e8eb !important; } .gform-datepicker-calendar .yearSelector td, .gform-datepicker-calendar .monthSelector td { height: 48px !important; padding: 4px !important; vertical-align: middle !important; } /* Year / month dropdown */ .gform-datepicker-calendar select.nav.current { display: block !important; width: 100% !important; height: 40px !important; margin: 0 !important; padding: 7px 34px 7px 12px !important; background-color: #ffffff !important; border: 2px solid #093b5c !important; border-radius: 8px 8px 8px 0 !important; color: #093b5c !important; font-family: "Source Sans Pro", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important; outline: none !important; } /* Previous / Next */ .gform-datepicker-calendar td.nav.prev, .gform-datepicker-calendar td.nav.next { width: 42px !important; padding: 0 !important; color: #093b5c !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; vertical-align: middle !important; cursor: pointer !important; } .gform-datepicker-calendar td.nav.prev span, .gform-datepicker-calendar td.nav.next span { display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; margin: auto !important; border-radius: 7px !important; } .gform-datepicker-calendar td.nav.prev:hover span, .gform-datepicker-calendar td.nav.next:hover span { background: #f3f5f6 !important; } /* ========================================================= WEEK DAYS ========================================================= */ .gform-datepicker-calendar th.week { height: 42px !important; padding: 5px 0 !important; color: #093b5c !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; vertical-align: middle !important; border-bottom: 1px solid #e3e8eb !important; } /* ========================================================= DATE GRID ========================================================= */ .gform-datepicker-calendar td.day, .gform-datepicker-calendar td.empty { width: 14.2857% !important; height: 44px !important; padding: 2px !important; color: #093b5c !important; font-size: 13px !important; font-weight: 500 !important; text-align: center !important; vertical-align: middle !important; } /* Date number */ .gform-datepicker-calendar td.day > span { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; margin: auto !important; border-radius: 50% !important; cursor: pointer !important; } /* Hover date */ .gform-datepicker-calendar td.day:hover > span { background: #f3f5f6 !important; } /* Today's date */ .gform-datepicker-calendar td.dayToday > span { border: 2px solid #1f592e !important; } /* Selected date */ .gform-datepicker-calendar td.dayMarked > span, .gform-datepicker-calendar td.selected > span { background: #1f592e !important; border-color: #1f592e !important; color: #ffffff !important; font-weight: 700 !important; } /* Focused date */ .gform-datepicker-calendar td.day:focus > span { outline: 2px solid #093b5c !important; outline-offset: 2px !important; } /* Empty calendar cells */ .gform-datepicker-calendar td.empty > span { display: block !important; width: 36px !important; height: 36px !important; margin: auto !important; } /* ========================================================= ACCESSIBILITY MESSAGE ========================================================= */ /* Keep available to screen readers but hide visually */ .gform-datepicker-calendar .monthMessage { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ========================================================= MOBILE ========================================================= */ @media only screen and (max-width: 600px) { .gform-datepicker-calendar > [role="application"] { width: calc(100vw - 20px) !important; max-width: 360px !important; padding: 10px 12px 12px !important; } .gform-datepicker-calendar .yearSelector td, .gform-datepicker-calendar .monthSelector td { height: 44px !important; } .gform-datepicker-calendar select.nav.current { height: 38px !important; font-size: 13px !important; } .gform-datepicker-calendar th.week { height: 38px !important; } .gform-datepicker-calendar td.day, .gform-datepicker-calendar td.empty { height: 40px !important; } .gform-datepicker-calendar td.day > span, .gform-datepicker-calendar td.empty > span { width: 33px !important; height: 33px !important; } }