/* =================================================================
   CSS VARIABLES
   ================================================================= */

:root {
  /* Primary Colors */
  --appt-brand-primary: #00A5B8;
	--appt-brand-secondary: #17666F;
  --appt-brand-accent: #1F1F1F;
  
  /* Background Colors */
  --appt-bg-light: #f8f9fa;
  --appt-bg-white: #ffffff;
  
  /* Text Colors */
  --appt-text-main: #1f1f1f;
	--appt-text-medium: #3d3d3d;
  --appt-text-muted: #2B2E31;
  
  /* Border Colors */
  --appt-border-light: #CCCCCC;
  --appt-border-medium: #707070;
  
  /* Button Colors */
  --btn-bg-primary: #00A5B8;
  --btn-bg-hover: #17666F;
  --btn-bg-secondary: #ffffff;
	--btn-bg-hover-secondary: #F6F6F6;
  --btn-text-primary: #ffffff;
  --btn-text-secondary: #1F1F1F;
  --btn-border-secondary: #2B2E31;
  
  /* State Colors */
  --appt-error: #790000;
	
	/* Font Family */
  --appt-font-family: "Poppins";
}

/* =================================================================
   LOADING SPINNER
   ================================================================= */
.elementor-editor-active .loading { display: none; }
.loading { position: fixed; z-index: 9999; height: 2em; width: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0; }
.loading:before { content: ""; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(rgba(20, 20, 20, 0.8), rgba(0, 0, 0, 0.8)); background: -webkit-radial-gradient(rgba(20, 20, 20, 0.8), rgba(0, 0, 0, 0.8)); }
.loading:not(:required) { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }
.loading:not(:required):after { content: ""; display: block; font-size: 10px; width: 1em; height: 1em; margin-top: -0.5em; -webkit-animation: spinner 150ms infinite linear; -moz-animation: spinner 150ms infinite linear; -ms-animation: spinner 150ms infinite linear; -o-animation: spinner 150ms infinite linear; animation: spinner 150ms infinite linear; border-radius: 0.5em; -webkit-box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0; box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0; }

@-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
@-moz-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
@-o-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }

/* =================================================================
   GLOBAL RESETS & HIDDEN ELEMENTS
   ================================================================= */
.gform_validation_errors, .appointment-details, .branch-timing summary::-webkit-details-marker, .form-submitted .opening-hours, .form-submitted .hide-on-submission, .success-message br, .elementor-location-header, .continue-browsing, .gf_progressbar_wrapper, .separator .gsection_title, .visually-hidden, .visually-hidden label, .visually-hidden .ginput_container, .appt-details-section, .appointment-details br, .appointment-details .choice .choice-wrapper, .page-title > p:empty, .branch-name .wpsl-contact-details, .branch-name .opening-hours, .wpsl-location-address br, .time-selection.second-option, .branch-name .map, .selected-service .ginput_container, .branch-address .map { display: none; }
.selected-service label {display: none;}
.time-selection .gfield_error.visually-hidden.date-selection, .gfield_error.visually-hidden.date-selection label, .hide-legend legend, .gfield_required .gfield_required_text, .time-selection .toggle, .time-selection.active .date-time.visually-hidden { display: none !important; }
.appointment-details.active .choice .choice-wrapper:nth-of-type(2) { display: block !important; }
.branches-data-container { max-height: 420px; overflow-y: scroll; padding-left: 0px; padding-right: 15px; padding-bottom: 10px; }
#branches-data { background-image: none; }
.show-on-submission h3 { display: none; }
.form-submitted .show-on-submission h3 { display: block !important; margin-bottom: 20px; }
.gform-theme-button, .gform_button { border-color: unset;}
/* for single branch */
.appointment-single-branch-wrapper form .gform_page:nth-child(1) {visibility: hidden;}
.appointment-single-branch-wrapper form .gform_page:nth-child(2) .gform_previous_button {display: none;}
.appointment-single-branch-wrapper .progress-bar ul li.passed:nth-child(1) {display: none;}
.appointment-single-branch-wrapper .already-visited-store {display: none !important;}
.appointment-single-branch-wrapper form .gform_page:nth-child(2) .back_btn { display: none !important;}
/* =================================================================
   TYPOGRAPHY & PAGE TITLES
   ================================================================= */
.page-title h1 { font-size: 24px; font-weight: 500; line-height: 32px; color: var(--appt-brand-accent); margin-bottom: 8px; }
.page-title h2 { font-size: 24px; font-weight: 500; line-height: 32px; color: var(--appt-brand-accent); margin-bottom: 8px; }
.page-title > p { color: var(--appt-text-muted); margin-bottom: 24px !important; }

/* =================================================================
   PROGRESS BAR
   ================================================================= */
.progress-bar ul { display: flex; align-items: center; padding: 0; margin: 0; font-size: 16px; line-height: 1.5em; list-style: none; gap: 8px; }
.progress-bar ul li { position: relative; font-weight: 400; min-width: 200px; text-align: center; transition: all 1s ease-in-out; }
.progress-bar ul li.active:after { background-color: var(--btn-bg-secondary); }
.progress-bar ul li.passed:not(.progress-bar ul li.passed.active):after { background-color: var(--appt-border-medium); }
.progress-bar ul li span { position: relative; display: inline-block; width: 24px; height: 24px; font-size: 14px; background: var(--appt-bg-white); border: 1px solid var(--appt-border-medium); border-radius: 50px; vertical-align: middle; margin-right: 3px; }
.progress-bar ul li span i { text-align: center; display: inline-block; margin: auto; position: absolute; left: 6px; top: 0px; font-size: 10px; color: var(--appt-border-medium); }
.progress-bar ul li.active { font-weight: 500; border-color: var(--btn-bg-primary); }
.progress-bar ul li.active span { border-color: var(--btn-bg-primary); background: var(--btn-bg-primary) !important; }
.progress-bar ul li.passed span, .progress-bar ul li.active span i { color: var(--btn-text-primary); font-weight: 700; }
.progress-bar ul li.passed span { background: var(--appt-border-medium); border-color: var(--appt-border-medium); }
.progress-bar ul li.passed span i:not(.progress-bar ul li.passed.active span i) { color: var(--appt-white); }

/* =================================================================
   PROGRESS LINE
   ================================================================= */
.progress-line { position: relative; width: 100%; height: 4px; background-color: #e0e0e0; border-radius: 10px; overflow: hidden; }
.progress-line .elementor-widget-html { left: 0; height: 100%; border-radius: 10px; transition: width 0.3s ease; }
.progress-line span { position: absolute; top: 0; left: 0; height: 100%; background-color: var(--btn-bg-primary); border-radius: 10px; transition: width 0.3s ease; }

/* =================================================================
   FORM WRAPPER & GENERIC STYLES
   ================================================================= */
.gform_wrapper.gravity-theme fieldset { border: none; display: block; margin: 0; padding: 0; }
.gform_wrapper.gravity-theme .gform_fields { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.gform_wrapper.gravity-theme .separator { padding-bottom: 6px; margin-bottom: 10px; }
.appointment-form p { margin-bottom: 3px; }
.appointment-form form { max-width: 619px; }
.appointment-form .charleft { display: none; }
img.gform_ajax_spinner { margin-left: 7px; }
.gform-body ul{padding-left: 0; list-style-type: none; }
.gform-body li{list-style-type: none; }

/* =================================================================
   FORM VALIDATION & ERRORS
   ================================================================= */
.appointment-form .gform_wrapper.gravity-theme .gfield_validation_message { background: none; border: none; padding: 0; margin: 0; font-size: 12px; font-weight: 600; color: var(--appt-error); }
.gform_wrapper.gravity-theme .gfield_error [aria-invalid=true] { border: 1px solid var(--appt-error) !important; }
.time-selection.active .gfield_error.visually-hidden.date-selection, .time-selection.active .gfield_error.visually-hidden.date-selection-2 { display: block !important; margin-left: 8px; margin-bottom: 5px; }
.visually-hidden.gfield_error { display: block; }
.gfield_error .gfield_label { color: var(--appt-brand-accent) !important; }
.gform_wrapper.gravity-theme .gfield_error legend { color: var(--appt-brand-accent); }

/* =================================================================
   FORM LABELS
   ================================================================= */
.gform_wrapper.gravity-theme .gfield_label { font-weight: 400 !important; margin-bottom: 7px !important; font-size: 14px;}
.gform_wrapper.gravity-theme .gfield_label label { font-weight: 500 !important; font-size: 14px; list-style: 1.5; margin-bottom: 8px !important; }
.gform_wrapper.gravity-theme .personal-info-wrapper .gfield .gfield_label, .gform_wrapper.gravity-theme .last-page-fields .gfield_label { font-size: 14px; line-height: 21px; margin-bottom: 4px !important; font-weight: 400 !important; color: var(--appt-brand-accent); }

/* =================================================================
   BRANCH SELECTION
   ================================================================= */
.appointment-form .dynamic-branch-name { display: none; margin-top: -30px; }
.appointment-form .dynamic-branch-name.gfield_error { display: block; }
.appointment-form .dynamic-branch-name > label.gform-field-label, .appointment-form .dynamic-branch-name > .ginput_container { display: none; }
.branches { cursor: pointer; padding-bottom: 16px; }
.branches.active, .branches:hover { background-color: var(--appt-bg-light) !important; border-color: var(--btn-bg-primary) !important; }
.branch-data { margin-bottom: 16px; }
.branch-data .wpsl-locations-details span:first-child strong { font-size: 18px; font-weight: 500; line-height: 28px; }
.branch-data .wpsl-location-address span { font-weight: 300; line-height: 26px; color: var(--appt-text-medium); }
.branch-data .wpsl-locations-details .wpsl-contact-details, .branch-data .store-opening-hours, .branch-data .branch-map { display: none; }
.branch-data .elementor-loop-container { gap: 16px !important; }

/* =================================================================
   BRANCH ADDRESS & MAP
   ================================================================= */
.branch-address strong, .appointment-details h3 { font-size: 18px; font-family: var(--appt-font-family); line-height: 28px; font-weight: 500; margin: 0px 0px 8px 0px; color: var(--appt-text-main); }
.branch-address .wpsl-contact-details, .emergency_section .wpsl-contact-details { font-size: 0; line-height: 0; }
.branch-address .wpsl-contact-details span a, .emergency_section .wpsl-contact-details span a { color: var(--appt-brand-accent) !important; font-size: 16px; line-height: 1.8em; font-weight: 500; font-family: var(--appt-font-family); }
.emergency_section .wpsl-contact-details span a{color: var(--appt-brand-secondary) !important;}
.branch-address .wpsl-location-address { margin-bottom: 10px; font-family: var(--appt-font-family); }
.map p { margin-bottom: 0; }
.map iframe { display: block; height: 118px; }
.map.map-cls { width: 100%; }

/* =================================================================
   BRANCH TIMING
   ================================================================= */
.branch-timing summary { list-style: none; position: relative; font-size: 14px; font-weight: 500; color: var(--btn-bg-hover); cursor: pointer; }
.branch-timing summary::after { content: "+"; font-weight: 300; position: absolute; width: 14px; height: 14px; top: 0px; left: 110px; font-size: 22px; }
.branch-timing details[open] summary::after { content: "-"; }
.wpsl-opening-hours { margin-top: 20px; }
.wpsl-opening-hours tr td { background: transparent !important; padding-bottom: 10px; }
table.wpsl-opening-hours tr { font-size: 14px; }
.emergency-contact { display: block !important; font-size: 16px !important; line-height: 1.5 !important; font-weight: 500 !important; color: var(--btn-bg-primary) !important; margin-top: 10px; }

/* =================================================================
   SERVICE SELECTION
   ================================================================= */
p.services-selection { margin-bottom: 8px !important; }
.appointment-types-list { display: flex; justify-content: start; align-items: start; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.appointment-types-list li { position: relative; border: 1px solid var(--appt-border-light); border-radius: 6px; padding: 16px 16px 16px 84px; flex: 1; width: 100%; cursor: pointer; }
.appointment-types-list li:hover, .appointment-types-list li.active { background: var(--appt-bg-light); border-color: var(--btn-bg-hover); }
.appointment-types-list li img { position: absolute; left: 22px; top: 8px; width: 45px; }
.appointment-types-list li .service-name { font-size: 18px; line-height: 1.55; font-weight: 500; color: var(--appt-brand-accent); font-family: var(--appt-font-family); }
.appointment-types-list li .appointment-description { font-size: 14px; line-height: 21px; font-weight: 400; color: var(--appt-text-medium); margin-bottom: 0; }
.service-availability.gfield_html { display: block; }
.appointment-form .gform_wrapper.gravity-theme .gform-theme-button.button.close-popup { position: relative; left: unset; top: unset; display: block; margin: auto; }
.other-exam-type { display: none; }
.other-exam-type input { height: 46px; padding: 12.5px 14px !important; }

/* =================================================================
   DATE & TIME SELECTION
   ================================================================= */
.time-selection { border: 1px solid var(--appt-border-light); border-radius: 6px; padding: 22px 24px 30px; margin-bottom: 21px; }
.time-selection.active { border: 2px solid var(--btn-bg-primary); background: var(--appt-bg-light); }
.time-selection.active .toggle { display: block !important; border: none; }
.time-selection .date-field-title button, .time-selection .date-field-title { position: relative; font-size: 16px; line-height: 27px; font-weight: 600; color: #212121; background: none; border: none; width: 100%; text-align: left; padding: 0; }
.time-selection .date-field-title p { cursor: pointer; width: fit-content; }
.time-selection.first-option .date-field-title p::after { transform: rotate(180deg); content: ""; position: absolute; right: 0; top: 0; background: url(/wp-content/uploads/2026/05/arrow-down.png) no-repeat center right / 18px; width: 18px; height: 18px; }
.time-selection.active .date-field-title p::after { transform: rotate(0deg); }
.first-option.active .selcted-date-time {visibility: hidden;}

/* =================================================================
   DATEPICKER CALENDAR
   ================================================================= */
.time-selection .hasDatepicker { margin-top: 13px; margin-left: 6px; margin-bottom: 5px; }
.time-selection .hasDatepicker .ui-datepicker { display: block; width: 100%; border: 1px solid var(--appt-border-light); border-radius: 6px; padding: 0; }
.time-selection .hasDatepicker .ui-datepicker .ui-datepicker-header { background: transparent; border: none; border-radius: 0; }
.ui-datepicker-calendar { margin-bottom: 0 !important; }
.ui-datepicker .ui-datepicker-title { font-size: 16px; line-height: 21px; font-weight: 600; padding: 4px 0; font-family: var(--appt-font-family) !important;}
.ui-datepicker-header > a { top: 7px !important; }
.ui-datepicker-prev > span, .ui-datepicker-next > span { background: url(/wp-content/uploads/2026/05/calender-arrow-next.png) no-repeat center center / 14px !important; }
.ui-datepicker .ui-datepicker-prev > span { transform: rotate(180deg); }
.ui-datepicker td { padding: 0 !important; }
.ui-datepicker-calendar thead > tr { border-bottom: 1px solid var(--appt-border-light); }
.ui-datepicker-calendar thead > tr th { font-weight: 600; font-size: 14px; padding: 7px !important; font-family: var(--appt-font-family) !important; }
.ui-datepicker td span, .ui-datepicker td a, .ui-datepicker-current-day.ui-datepicker-today .ui-state-default, .ui-state-default { background: var(--appt-bg-white) !important; border-bottom: 0 !important; border-right: 0 !important; border: 1px solid #D5D4DF !important; text-align: center; min-height: 51px; display: flex !important; justify-content: center; align-items: center; font-size: 16px; line-height: 1.5em; font-weight: 400 !important; color: var(--appt-brand-accent) !important; font-family: var(--appt-font-family); }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-state-default:hover, .ui-state-default.ui-state-highlight:hover { background-color: var(--btn-bg-primary) !important; color: var(--btn-text-primary) !important; font-weight: 500 !important; }
.ui-datepicker-calendar td a:hover { background-color: var(--btn-bg-primary) !important; color: var(--btn-text-primary) !important; }
.ui-datepicker-clicked.ui-datepicker-current-day.ui-datepicker-today a.ui-state-default, html .ui-datepicker-current-day a { background-color: var(--btn-bg-primary) !important; color: var(--btn-text-primary) !important; font-weight: 500 !important; }
.ui-datepicker-today a.ui-state-default.ui-state-active, .ui-datepicker-current-day a.ui-state-default.ui-state-active { border: 2px solid var(--btn-bg-hover); background-color: var(--btn-bg-hover); color: var(--btn-text-primary); }
.ui-datepicker-today a.ui-state-default.ui-state-highlight { border: 2px solid var(--btn-bg-primary) !important; background: #F5FEFF; color: var(--btn-bg-hover); }
td.ui-datepicker-unselectable.ui-state-disabled .ui-state-default { position: relative; overflow: hidden; opacity: 0.7; }
td.ui-datepicker-unselectable.ui-state-disabled .ui-state-default::before { content: ''; position: absolute; background: var(--appt-border-light); width: 1px; height: 240%; transform: rotate3d(0, 4, 6, 75deg); }

/* =================================================================
   TIME PREFERENCE
   ================================================================= */
.preffered-time { margin: 24px 0 0 7px !important; padding: 0; }
.preffered-time .gfield_label { font-size: 16px !important; line-height: 27px; font-weight: 500 !important; }
.preffered-time .gfield_radio { display: flex; flex-wrap: wrap; gap: 8px 8px; justify-content: start; }
.preffered-time .gchoice { flex: 0 0 30%; border: 1px solid var(--appt-border-light); border-radius: 6px; text-align: center; position: relative; }
.preffered-time .gchoice input { position: absolute; }
.preffered-time input:focus { outline: none !important; }
.preffered-time .gchoice label { position: relative; width: 100%; background: var(--appt-bg-white); max-width: 100% !important; padding: 10px 20px; border-radius: 6px; color: #000 !important; font-size: 14px !important; line-height: 1.5; font-weight: 500 !important; }
.preffered-time .gchoice input:checked + label, .preffered-time .gchoice label:hover, .preffered-time .gchoice label:focus { color: var(--btn-text-primary) !important; background: var(--btn-bg-primary); cursor: pointer; }

/* =================================================================
   SECOND PREFERENCE CHECKBOX
   ================================================================= */
.second-pref { border: none; padding-left: 0px; padding-bottom: 23px !important; }
.second-pref .gfield_checkbox input { border: 1px solid var(--appt-border-light); }
.second-pref .gfield-choice-input { width: 22px; height: 23px; position: absolute; left: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0 !important; }
.second-pref .gfield-choice-input:checked::after { content: ""; position: absolute; height: 23px; width: 22px; background: var(--btn-text-primary) url(/wp-content/uploads/2026/05/checked-box-1.png) no-repeat center center / 24px; left: -1px; top: -1px; }
.second-pref label { padding-left: 35px; font-size: 16px; line-height: 1.5; }

/* =================================================================
   SELECTED DATE TIME DISPLAY
   ================================================================= */
.time-selection .date-time.visually-hidden, .time-selection .date-time.visually-hidden .ginput_container { display: block !important; }
.time-selection .date-time.visually-hidden .ginput_container input { border: none; padding: 0; font-size: 16px; line-height: 1.5; margin-top: 10px; }
.time-selection.second-option.active, .visually-hidden.selcted-date-time.active, .visually-hidden.selcted-date-time.active .ginput_container { display: block; }
.visually-hidden.selcted-date-time.active .ginput_container input { border: none; font-size: 16px; height: auto; color: #212121; padding: 0; pointer-events: none; }

/* =================================================================
   PERSONAL INFORMATION SECTION
   ================================================================= */
.personal-info-wrapper ul{ display: flex; flex-wrap: wrap; padding: 0; gap: 16px 20px; margin-top: 24px;}
.personal-info-wrapper .gfield { width: calc(50% - 10px); }
.personal-info-wrapper .gfield input, .personal-info-wrapper .gfield textarea, .personal-info-wrapper .gfield select { border: 1px solid var(--appt-border-medium); border-radius: 4px; height: 52px; font-size: 14px !important; }
.personal-info-wrapper .gfield input:focus, .personal-info-wrapper .gfield textarea:focus { border-color: var(--appt-brand-accent); }
.gform_wrapper input:focus::placeholder, .gform_wrapper textarea:focus::placeholder { opacity: 0.8 !important; }

/* =================================================================
   CUSTOMER STATUS RADIO
   ================================================================= */
.already-customer{margin-top: 24px !important; }
.already-customer .gfield_radio { display: flex; gap: 27px; margin-top: 3px;}
.already-customer .gfield_radio .gchoice {display: flex; align-items: center; }
.already-customer .gfield_radio .gfield-choice-input { width: 24px; height: 24px; margin-left: 0; margin-right: 6px; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0 !important; border: 0 !important; }
.already-customer .gfield-choice-input::before { content: ""; background: var(--appt-bg-white); width: 24px; height: 24px; z-index: 9999; position: absolute; border-radius: 50%; border: 1px solid #909090; }
.already-customer .gfield-choice-input:checked::before { border: 7px solid var(--btn-bg-hover); }
.already-customer .gfield_radio label { font-size: 14px !important; font-weight: 400; color: var(--appt-brand-accent) !important; }

/* =================================================================
   VISITED STORE DROPDOWN
   ================================================================= */
.already-visited-store label { margin-top: 10px; margin-bottom: 5px; font-size: 14px;}
.already-visited-store .gfield_select { font-size: 14px !important; padding: 11px 8px !important; margin-bottom: 8px !important; width: 100% !important; border: 1px solid var(--appt-border-medium) !important; color: var(--appt-brand-accent) !important; border-radius: 4px; min-height: 46px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url(/wp-content/uploads/2026/05/arrow-down.png) no-repeat 98% / 12px; }

/* =================================================================
   TEXTAREA
   ================================================================= */
.info-textarea { margin-top: 24px; }
.info-textarea textarea { height: 114px !important; border-radius: 4px; padding-top: 9px; margin-bottom: 10px; }

/* =================================================================
   APPOINTMENT DETAILS OVERVIEW
   ================================================================= */
.gfield_checkbox { position: relative; }
.appointment-details .type { display: flex; }
.appointment-details .label { display: inline-block; min-width: 90px; font-weight: 500; }
.appointment-details #form-name-first .name-text { display: inline-block; min-width: 86px; font-weight: 500; }
.appointment-details .choice .choice-wrapper .date { padding-right: 10px; }
.appointment-details span.val, .appointment-details .name-values, .appointment-details #other-val, .appointment-details #other-val .name-text { font-weight: 400; word-wrap: break-word; }

/* =================================================================
   FORM FOOTER BUTTONS
   ================================================================= */
.gform-page-footer { margin-top: 24px; display: flex; gap: 16px; }
.appointment-form .gform_wrapper.gravity-theme .gform_previous_button { background: var(--btn-bg-secondary); color: var(--btn-text-secondary) !important; border: 1px solid var(--btn-border-secondary); }
.appointment-form .gform_wrapper.gravity-theme .gform_previous_button:hover { background-color: var(--btn-bg-hover-secondary) !important; color: var(--btn-text-secondary) !important; }
.cross-btn .elementor-button-text { display: flex; align-items: center; gap: 10px; width: 14px; }

/* =================================================================
   SUCCESS MESSAGE
   ================================================================= */
.form-submitted .elementor-location-header { display: block; border-bottom: 1px solid var(--btn-bg-primary); }
.form-submitted .main-form-overview-wrapper { margin-bottom: 0 !important; }
.form-submitted .main-form-overview-wrapper .e-con-inner { flex-direction: column; max-width: 550px !important; background-color: var(--appt-bg-white); }
.form-submitted .main-form-overview-wrapper .elementor-element.e-con-full { width: 100%; }
.form-submitted .main-form-overview-wrapper .elementor-element.overview-col { padding: 32px 24px; }
.form-submitted .main-form-overview-wrapper .elementor-element { border-bottom: 0; }
.form-submitted .appointment-details .elementor-widget-container { border: none; }
.form-submitted .branch-address .elementor-widget-container, .form-submitted .appointment-details .elementor-widget-container { border-bottom: 0 !important; }
.success-message { padding: 16px 0; text-align: center; }
.success-message h2 { font-size: 34px; line-height: 1.2; color: var(--appt-brand-accent); font-weight: 600; text-align: center; margin-bottom: 15px; }
.success-message h3 { font-size: 24px; line-height: 30px; font-weight: 400; text-align: center; color: var(--appt-brand-accent); text-transform: uppercase; margin-bottom: 16px; }
.success-message p { font-size: 16px; line-height: 26px; color: var(--appt-text-medium); text-align: center; max-width: 430px; margin: 0 auto 31px; }
.success-message p a { color: var(--appt-text-medium) !important; }
.success-message a { text-transform: lowercase; color: var(--appt-text-medium); }
.continue-browsing a { display: block; max-width: 205px; margin: auto; padding-left: 0 !important; padding-right: 0 !important; }
.form-submitted .continue-browsing { display: block; }

/* =================================================================
   RESPONSIVE - DESKTOP LARGE
   ================================================================= */
@media screen and (max-width: 1366px) {
  .progress-bar ul { justify-content: center; }
  .progress-bar ul li { min-width: 135px; }
}

@media screen and (max-width: 1100px) {
  .form-header .progress-container { order: 3; }
}

@media screen and (min-width: 769px) {
  .time-selection .hasDatepicker { max-width: 429px; }
}

/* =================================================================
   RESPONSIVE - TABLET & MOBILE
   ================================================================= */
@media screen and (max-width: 768px) {
  .elementor-location-footer { display: none; }
  .appointment-types-list li .service-name { font-size: 16px; }
  .progress-bar ul { flex-wrap: wrap; gap: 32px; }
  .progress-bar ul li { min-width: auto; }
  .appointment-form form { max-width: 100%; }
  .page-title > p { margin-bottom: 16px; }
  .page-title h1, .page-title h2, .page-title h3 { font-size: 18px; }
  .preffered-time { margin-left: 0 !important; padding: 0; }
  .personal-info-wrapper { gap: 17px 20px; }
  .personal-info-wrapper .gfield { width: 100%; }
	.info-textarea, .already-customer{margin-top: 16px !important; }
  .time-selection { padding: 16px 16px 24px; }
  .preffered-time .gchoice label { padding: 10px; }
	.preffered-time .gchoice {flex: 1; }
  .time-selection .hasDatepicker { margin-left: 0; }
  .preffered-time .gfield_radio { flex-wrap: wrap; }
	.appointment-form input[type="submit"] {margin-bottom: 0 !important; }
  .modal-content { padding: 24px 16px; }
  .modal-content ul { padding-left: 24px; }
  .close-popup img { margin-top: 10px !important; }
  .success-message { text-align: left; }
  .success-message h2 { font-size: 24px; line-height: 1.2em; text-align: left; }
  .form-submitted .form_section { padding-left: 0; padding-right: 0; }
  .form-submitted .main-form-overview-wrapper .elementor-container > .elementor-column.overview-col > div { margin-top: 0 !important; }
  .second-pref .gfield-choice-input { width: 20px; height: 20px; top: 3px !important; }
  .fixed-overview-col.closed-on-mob:not(.form-submitted .fixed-overview-col.closed-on-mob) { display: none; }
  .fixed-overview-col:not(.form-submitted .fixed-overview-col) { position: fixed; top: 0; left: 0; height: 100vh; width: 100%; margin-top: 0; z-index: 9999; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  body.fixed-overview-open { overflow-y: hidden; }
  .gform_previous_button { visibility: hidden; position: absolute; width: 0; height: 0; overflow: hidden; padding: 0; margin: 0; border: none; }
  .back_btn { visibility: hidden; }
  .gform-page-footer { position: fixed; bottom: 0; left: 0px; right: 0px; margin-left: 0px !important; margin-right: 0px !important; padding: 10px 16px !important; background: var(--appt-bg-white); flex-direction: column-reverse; box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.08); z-index: 9999 !important; }
  .gform-page-footer .gform-theme-button { margin-bottom: 0 !important; }
  .gform-page-footer .gform_button, .gform-page-footer .gform_next_button { margin-left: 0 !important; }
  .form-submitted .main-form-overview-wrapper .e-con-inner { padding-left: 16px; padding-right: 16px; margin-bottom: 16px; }
  .fixed-overview-col:not(.form-submitted .fixed-overview-col) { overflow-y: scroll !important; -webkit-overflow-scrolling: touch; display: flex; flex-direction: row !important; }
}

/* =================================================================
   RESPONSIVE - MOBILE SMALL
   ================================================================= */
@media (max-width: 480px) {
  .gform-page-footer .gform_button, .gform-page-footer .gform_next_button { width: 100% !important; }
  .preffered-time .gfield_radio { gap: 8px 4px; }
	.appointment-types-list li .service-name{max-width: 240px; }
	.appointment-types-list li img{top: 20px; }
}