@import url("//fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");

:root {
    /* Local variables */
    --title-font: "Source Serif 4", serif;
    --default-font: "Source Sans 3", sans-serif;
    --list-font: "Montserrat", sans-serif;
    --primary: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --dark-brand: oklch(0.24 0.0432 271.28); /* 24 30 52 */
    --generic-text: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --green: oklch(0.72 0.1172 187.79); /* 42 188 178 */
    --green-subtle: oklch(0.9826 0.0117 190.45); /* 241 252 251 */
    --secondary-green: oklch(0.72 0.1204 187.91); /* 20 188 178 */
    --bg-ui: oklch(0.96 0 0); /* 240 240 240 */
    --bg-container: oklch(0.9826 0.0117 190.45); /* 241, 252, 251 */
    --default-border: oklch(0.87 0.0198 252.89); /* 203 213 225 */
    --default-border-hover: oklch(0.83 0 0); /* 200 200 200 */
    --default-input-font-size: 1.125rem;
    --control-border: oklch(0.87 0.0314 263.5); /*203 214 235 */
    --muted-text: oklch(0.37 0.0119 285.81); /* 63 63 70 */
    --text-default: oklch(0.2077 0.0398 265.75); /* 15, 23, 42 */
    /* Generic variables */
    --header-bg-default: var(--primary);
    --footer-bg-default: oklch(1 0 0); /* 255 255 255 */
    --base-font-family: var(--default-font);
    --title-font-family: var(--title-font);
    --list-item-font-family: var(--list-font);
    --base-font-size: 18px;
    --default-font-size: 1.125rem;
    --focus-ring: var(--secondary-green);
    --focus-ring-secondary: oklch(0 0 0); /* 0 0 0 */
    --focus-ring-width: 0.25rem;
    --focus-ring-offset: 0;
    --label-font-size: 1.125rem;
    --label-fw: 700;
    --optional-label-font-size: 1.125rem;
    --optional-label-fw: 400;
    --optional-label-font-family: var(--default-font);
    --optional-label-default: oklch(0.45 0.043 257.42); /* 69 85 108 */
    --placeholder-default: oklch(0.68 0 0); /*153 153 153 */
    --link-text-default: oklch(0.72 0.1204 187.91); /* 30 188 178 */
    --link-text-hover: oklch(0.69 0.1173 187.62); /* 20 178 168 */
    --label-text-default: var(--dark-brand);
    --label-optional-default: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --generic-icon-color: oklch(0.55 0.0407 257.42); /* 100 116 139 */
    --generic-icon-color-hover: oklch(0.55 0.0407 257.42); /* 100 116 139 */
    /* Overrides */
    --bg-brand: var(--primary);
    --text-error: oklch(0.51 0.1905 27.52); /* 185 28 28 */
    /* Button */
    --color-btn-bg-primary: oklch(0.89 0.1226 85.25); /* 254 211 117 */
    --color-btn-bg-primary-hover: oklch(0.91 0.1008 86.07); /* 254 220 145 */
    --color-btn-bg-primary-pressed: oklch(0.89 0.1226 85.25); /* 254 211 117 */
    --color-btn-primary-text: var(--generic-text);
    --btn-primary-fw: bold;
    --color-btn-bg-secondary: var(--dark-brand);
    --color-btn-bg-secondary-hover: oklch(0.33 0.0347 270.85); /* 47 53 72; */
    --color-btn-bg-secondary-pressed: var(--dark-brand);
    --color-btn-secondary-text: oklch(1 0 0); /* 255 255 255 */
    --btn-secondary-fw: bold;
    --color-btn-bg-disabled: oklch(0.72 0.0131 276.02); /* 163 165 174*/
    --color-btn-disabled-text: oklch(1 0 0); /* 255 255 255 */
    --btn-radius: 9999px;
    --padding-btn-px: 1.5rem;
    --padding-btn-py: 0.75rem;
    --btn-border: 0;
    --text-btn-font-size: 1.125rem;
    --font-btn-link-font-family: var(--default-font);
    /* Input */
    --input-font-size: var(--default-input-font-size);
    --input-px: 0.75rem;
    --input-py: 0.75rem;
    --input-bg-default: oklch(1 0 0); /* 255 255 255 */
    --input-bg-error: oklch(1 0 0); /* 255 255 255 */
    --input-border-default: var(--default-border);
    --input-border-default-hover: var(--default-border-hover);
    --input-text-default: var(--primary);
    --input-text-disabled: var(--primary);
    --input-border-error: oklch(0.6 0.247673 29.2339); /* 242 0 0 */
    --input-radius: 0.375rem;
    --input-min-h: 2.938rem;
    --input-h: 2.938rem;
    --input-trailing-default: oklch(0.46 0 0); /* 89 89 89 */
    --input-trailing-font-size: var(--base-font-size);
    --input-trailing-font-family: var(--title-font-family);
    --input-trailing-fw: 400;
    --input-text-error: oklch(0.53 0.2111 28.73); /* 200 12 12 */
    --input-error-font-size: 1rem;
    --input-error-font-family: var(--base-font-family);
    --input-error-fw: 400;
    --input-usage-w: 220px;
    --input-error-border-width: 0.063rem;
    /* Checkbox */
    --checkbox-bg-default: oklch(0.63 0.2577 29.23); /* 255 0 0 */
    --checkbox-bg-default-hover: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --checkbox-bg-checked: var(--dark-brand);
    --checkbox-bg-checked-hover: var(--dark-brand);
    --checkbox-bg-disabled: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --checkbox-bg-disabled-checked: oklch(0.92 0 0); /*230 230 230*/
    --checkbox-bg-error: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --checkbox-bg-error-checked: oklch(0.58 0.238666 28.4765); /* 231 0 11 */
    --checkbox-bg-error-hover: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --checkbox-bg-error-checked-hover: oklch(
        0.58 0.238666 28.4765
    ); /* 231 0 11 */
    --checkbox-border-default: oklch(0.89 0 0); /* 217 217 217 */
    --checkbox-border-default-hover: var(--default-border);
    --checkbox-border-disabled: var(--default-border);
    --checkbox-border-disabled-checked: oklch(0.86 0 0); /* 210 210 210 */
    --checkbox-border-error: oklch(0.58 0.238666 28.4765); /* 231 0 11 */
    --checkbox-border-error-hover: var(--default-border);
    --checkbox-border-error-checked-hover: oklch(
        0.58 0.238666 28.4765
    ); /* 231 0 11 */
    --checkbox-border-checked: var(--dark-brand);
    --checkbox-border-checked-hover: var(--dark-brand);
    --checkbox-w: 1.5rem;
    --checkbox-h: 1.5rem;
    --checkbox-radius: 0.375rem;
    --checkbox-text-color: var(--generic-text);
    --checkbox-font-size: 1.125rem;
    /* Boxed Radio */
    --boxed-radio-bg-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --boxed-radio-bg-default-hover: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --boxed-radio-bg-checked: oklch(0.95 0.0353 192.23); /* 214 248 246 */
    --boxed-radio-bg-checked-hover: oklch(0.95 0.0353 192.23); /* 214 248 246 */
    --boxed-radio-bg-disabled: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --boxed-radio-bg-error: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --boxed-radio-bg-error-hover: oklch(0.96 0.0108 17.34); /* 250 240 240 */
    --boxed-radio-border-default: var(--control-border);
    --boxed-radio-border-default-hover: oklch(0.83 0 0); /* 200 200 200 */
    --boxed-radio-border-checked: oklch(0.72 0.1172 187.79); /* 42 188 178 */
    --boxed-radio-border-checked-hover: oklch(
        0.69 0.1147 187.51
    ); /*32 178 168 */
    --boxed-radio-border-disabled: oklch(0.93 0.0126 255.51); /* 226 232 240 */
    --boxed-radio-border-error: oklch(0.53 0.2111 28.73); /* 200 12 12 */
    --boxed-radio-border-error-hover: oklch(0.5 0.2059 29.14); /* 190 2 2 */
    --boxed-radio-radius: 0.375rem;
    --boxed-radio-border: 0.125rem;
    --boxed-radio-font-size: 1.5rem;
    --boxed-radio-font-fw: 700;
    --boxed-radio-px: 4.375rem;
    --boxed-radio-py: 1.25rem;
    --boxed-radio-border-outer-default: var(--control-border);
    --boxed-radio-border-outer-default-hover: oklch(0.83 0 0); /* 200 200 200 */
    --boxed-radio-border-outer-disabled: oklch(
        0.93 0.0126 255.51
    ); /* 226 232 240 */
    --boxed-radio-border-outer-checked: var(--dark-brand);
    --boxed-radio-border-outer-checked-hover: oklch(
        0.72 0.1172 187.79
    ); /* 42 188 178 */
    --boxed-radio-bg-outer-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --boxed-radio-bg-outer-checked: oklch(1 0 0); /* 255 255 255 */
    --boxed-radio-bg-outer-disabled: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --boxed-radio-bg-outer-disabled-checked: oklch(
        0.81 0.0269 248.16
    ); /* 180 195 210 */
    --boxed-radio-bg-outer-error: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --boxed-radio-bg-outer-error-hover: oklch(
        0.91 0.15455 194.7689
    ); /* 0 255 255 */
    /* Card */
    --card-bg-default: oklch(1 0 0); /* 255 255 255 */
    --card-border-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --card-bg-collapsed: oklch(1 0 0); /* 255 255 255 */
    --card-border-collapsed: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --card-opacity-collapsed: 0.5;
    --card-radius: 1.5rem;
    --card-border: 0;
    --card-px: 2.5rem;
    --card-py: 2.5rem;
    --card-title-px: 0;
    --card-title-py: 0;
    --card-footer-px: 0;
    --card-footer-py: 0;
    --card-title-font-family: var(--title-font);
    --card-title-default: var(--primary);
    --card-title-collapsed: var(--primary);
    --card-title-font-size: 2rem;
    --card-lead-font-size: 1.5rem;
    --card-lead-default: 1.5rem;
    --card-title-fw: 700;
    --card-content-my: 2.5rem;
    --card-sub-title-default: var(--primary);
    --card-sub-title-font-size: 1.5rem;
    --card-text-default: var(--primary);
    --card-lead-mt: 0.25rem;
    --card-lead-mb: 0;
    --card-sub-title-font-family: var(--title-font);
    --card-sub-lead-default: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --card-sub-lead-font-size: 1.125rem;
    --card-sub-lead-font-family: var(--default-font);
    --card-sub-lead-fw: 400;
    --card-sub-lead-mt: 0.5rem;
    --card-sub-lead-mb: 0;
    /* Stepper */
    --stepper-count-font-family: var(--title-font);
    --stepper-count-fw: 700;
    --stepper-count-font-size: 0.938rem;
    --stepper-count-radius: 9999px;
    --stepper-count-px: 0.5rem;
    --stepper-count-py: 0.5rem;
    --stepper-count-bg-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --stepper-count-bg-default-hover: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --stepper-count-bg-active: var(--primary);
    --stepper-count-bg-active-hover: var(--primary);
    --stepper-count-border-default: oklch(0.97 0.011 303.11); /* 246 243 251 */
    --stepper-count-border-default-hover: oklch(
        0.97 0.011 303.11
    ); /* 246 243 251 */
    --stepper-count-border-active: var(--primary);
    --stepper-count-border-active-hover: var(--primary);
    --stepper-count-text-default: oklch(0.63 0 0); /* 136 136 136 */
    --stepper-count-text-default-hover: oklch(0.63 0 0); /* 136 136 136 */
    --stepper-count-text-active: oklch(1 0 0); /* 255 255 255 */
    --stepper-count-text-active-hover: oklch(1 0 0); /* 255 255 255 */
    --stepper-count-text-link-default: var(--dark-brand);
    --stepper-count-text-link-hover: var(--dark-brand);
    --stepper-count-w: 2rem;
    --stepper-count-h: 2rem;
    --stepper-label-default: oklch(0.63 0 0); /* 136 136 136 */
    --stepper-label-hover: oklch(0.63 0 0); /* 136 136 136 */
    --stepper-link-label-default: var(--muted-text);
    --stepper-link-label-hover: var(--muted-text);
    --stepper-label-active: var(--muted-text);
    --stepper-label-active-hover: var(--muted-text);
    --stepper-label-fw: 400;
    --stepper-label-active-fw: 600;
    --stepper-container-px: 1rem;
    --stepper-container-py: 2rem;
    /* Callout */
    --callout-bg-subtle: oklch(0.97 0.0091 258.34); /* 242 246 252 */
    --callout-border-subtle: oklch(0.46 0.2047 270.09); /* 49 66 199 */
    --callout-title-fw: 700;
    --callout-title-font-size: 1.375rem;
    --callout-body-font-size: 1.125rem;
    --callout-px: 1.25rem;
    --callout-py: 1rem;
    --callout-title-tracking: -0.015rem;
    --callout-body-tracking: -0.012rem;
    --callout-title-leading: 150%;
    --callout-body-leading: 127.778%;
    --callout-title-mb: 0.25rem;
    --callout-text-default: var(--generic-text);
    /* Tab */
    --tab-bg-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --tab-bg-default-hover: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --tab-bg-active: var(--dark-brand);
    --tab-bg-active-hover: var(--dark-brand);
    --tab-text-default: oklch(0 0 0); /* 0 0 0 */
    --tab-text-default-hover: oklch(0.32 0 0); /* 50 50 50 */
    --tab-text-active: oklch(1 0 0); /* 255 255 255 */
    --tab-text-active-hover: oklch(1 0 0); /* 255 255 255 */
    --tab-fw: 400;
    --tab-active-fw: 700;
    --tab-font-family: var(--default-font);
    --tab-radius: 9999px;
    --tab-px: 1rem;
    --tab-py: 0.25rem;
    --tab-border-width: 1px;
    --tab-font-size: 1.125rem;
    /* Accordion */
    --accordion-header-bg-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --accordion-header-bg-default-hover: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --accordion-header-bg-active: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --accordion-header-bg-active-hover: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --accordion-header-text-default: oklch(0.38 0.0253 266.9); /* 59 65 79 */
    --accordion-header-text-default-hover: oklch(
        0.38 0.0253 266.9
    ); /* 59 65 79 */
    --accordion-header-text-active: oklch(0.38 0.0253 266.9); /* 59 65 79 */
    --accordion-header-text-active-hover: oklch(
        0.38 0.0253 266.9
    ); /* 59 65 79 */
    --accordion-header-font-family: var(--default-font);
    --accordion-header-font-size: 1rem;
    --accordion-border-default: oklch(0.83 0.0245 223.74); /* 183 203 211 */
    --accordion-header-fw: 600;
    --accordion-header-px: 1.5rem;
    --accordion-header-py: 1rem;
    --accordion-content-px: 1.5rem;
    --accordion-content-py: 1rem;
    /* Accordion Container */
    --accordion-container-px: 0;
    --accordion-container-py: 0;
    --accordion-container-border-default: oklch(
        0.83 0.0245 223.74
    ); /* 183 203 211 */
    --accordion-container-border: 1px;
    --accordion-container-heading-px: 1.5rem;
    --accordion-container-heading-py: 1.5rem;
    --accordion-container-header-font-family: var(--title-font-family);
    --accordion-container-header-fw: 600;
    --accordion-container-header-font-size: 1.25rem;
    --accordion-container-header-default: oklch(
        0.38 0.0253 266.9
    ); /* 59 65 79 */
    --accordion-footer-font-size: 1rem;
    --accordion-container-footer-px: 1.5rem;
    --accordion-container-footer-py: 1rem;
    --accordion-container-footer-bg-default: oklch(
        0.98 0.0025 228.78
    ); /* 247 249 250 */
    --accordion-container-radius: 1.5rem;
    --accordion-container-footer-font-family: var(--default-font);
    --accordion-container-footer-fw: 600;
    --accordion-container-footer-text: oklch(0.38 0.0253 266.9); /* 59 65 79 */
    /* Modal */
    --modal-header-font-family: var(--title-font-family);
    --modal-header-fw: 700;
    --modal-header-font-size: 2rem;
    --modal-header-bg-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --modal-header-border-default: oklch(0.83 0.0245 223.74); /* 183 203 211 */
    --modal-header-text-default: var(--primary);
    --modal-header-border: 0;
    --modal-header-px: 2rem;
    --modal-header-py: 2rem;
    --modal-footer-font-family: var(--title-font-family);
    --modal-footer-fw: 700;
    --modal-footer-font-size: 2rem;
    --modal-footer-bg-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --modal-footer-border-default: oklch(0.83 0.0245 223.74); /* 183 203 211 */
    --modal-footer-text-default: var(--primary);
    --modal-footer-border: 0;
    --modal-footer-px: 2rem;
    --modal-footer-py: 2rem;
    --modal-content-px: 2rem;
    --modal-content-py: 0rem;
    --modal-border: 1px;
    --modal-border-default: oklch(0.83 0.0245 223.74); /* 183 203 211 */
    --modal-radius: 1.5rem;
    --modal-title-leading: 1;
    /* Cost Specification */
    --cost-spec-item-font: var(--default-font);
    --cost-spec-item-font-size: 1rem;
    --cost-spec-default: oklch(0.38 0.0253 266.9); /* 59 65 79 */
    --cost-spec-fineprint-default: var(--muted-text);
    --cost-spec-icon-container-gas: oklch(0.89 0.1226 85.25); /* 254 211 117 */
    --cost-spec-icon-container-electricity: oklch(
        0.72 0.1204 187.91
    ); /* 30 188 178 */
    --cost-spec-icon-electricity: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --cost-spec-icon-gas: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --cost-spec-icon-size: 1rem;
    --cost-spec-icon-container-w: 1.5rem;
    --cost-spec-icon-container-h: 1.5rem;
    --cost-spec-icon-container-radius: 999px;
    /* Single Select*/
    --select-border-default: var(--default-border);
    --select-border: 1px;
    --select-border-default-hover: var(--default-border-hover);
    --select-px: 0.75rem;
    --select-py: 0.635rem;
    --select-bg-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --select-bg-default-hover: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --select-text-default: var(--primary);
    --select-text-default-hover: oklch(0.63 0.2577 29.23); /* 255 0 0 */
    --select-label-font-size: var(--default-input-font-size);
    --select-label-fw: 400;
    --select-h-offset: 15;
    /* Dropdown */
    --dropdown-font-size: var(--default-input-font-size);
    --dropdown-text-default: var(--primary);
    --dropdown-text-default-hover: var(--primary);
    --dropdown-text-selected: var(--primary);
    --dropdown-text-selected-hover: var(--primary);
    --dropdown-bg-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --dropdown-bg-default-hover: oklch(0.97 0.0148 191.77); /* 234 248 247 */
    --dropdown-bg-selected: oklch(0.97 0.0148 191.77); /* 234 248 247 */
    --dropdown-bg-selected-hover: oklch(0.97 0.0148 191.77); /* 234 248 247 */
    --dropdown-text-focus: var(--primary);
    --dropdown-bg-focus: oklch(0.96 0 0); /* 240 240 240 */
    --dropdown-icon-selected: var(--green);
    --dropdown-icon-selected-hover: var(--green);
    --dropdown-empty-text-default: var(--placeholder-default);
    --dropdown-option-px: 0.75rem;
    --dropdown-option-py: 0.65rem;
    --select-radius: var(--input-radius);
    /* Date Picker */
    --datepicker-font-size: var(--default-input-font-size);
    --datepicker-fw: 800;
    --datepicker-font-family: var(--base-font-family);
    --datepicker-px: 0;
    --datepicker-py: 0.75rem;
    --datepicker-border-default: var(--default-border);
    --datepicker-border-default-hover: var(--default-border-hover);
    --datepicker-border-error: oklch(0.58 0.238666 28.4765); /* 231 0 11 */
    --datepicker-border-error-hover: oklch(
        0.58 0.238666 28.4765
    ); /* 231 0 11 */
    --datepicker-bg-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --datepicker-bg-default-hover: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --datepicker-bg-error: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --datepicker-bg-error-hover: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --datepicker-text-default: var(--primary);
    --datepicker-text-default-hover: var(--primary);
    --datepicker-border: 1px;
    --datepicker-radius: 0.375rem;
    --datepicker-error-text: oklch(0.53 0.2111 28.73); /* 200 12 12 */
    --datepicker-error-font-size: 1rem;
    --datepicker-error-font-family: var(--base-font-family);
    --datepicker-error-fw: 400;
    /* Calendar*/
    --calendar-header-text: var(--primary);
    --calendar-header-font-size: var(--base-font-size);
    --calendar-header-fw: 700;
    --calendar-header-font-family: var(--base-font-family);
    --calendar-weekday: oklch(0.38 0.0253 266.9); /* 59 65 79 */
    --calendar-weekday-font-size: 0.75rem;
    --calendar-weekday-fw: 400;
    --calendar-weekday-font-family: var(--base-font-family);
    --calendar-bg-selected: var(--dark-brand);
    --calendar-bg-selected-hover: var(--dark-brand);
    --calendar-text-selected: oklch(1 0 0); /* 255 255 255 */
    --calendar-text-selected-hover: oklch(1 0 0); /* 255 255 255 */
    --calendar-selected-border: 0;
    --calendar-selected-border-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --calendar-selected-border-hover: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --calendar-bg-disabled: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --calendar-text-disabled: oklch(0.63 0 0); /* 136 136 136 */
    --calendar-bg-selected-unavailable: oklch(0.97 0 0); /* 245 245 245*/
    --calendar-text-selected-unavailable: oklch(0.63 0 0); /* 136 136 136 */
    --calendar-bg-unavailable: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --calendar-text-unavailable: oklch(0.63 0 0); /* 136 136 136 */
    --calendar-bg-today: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --calendar-bg-today-hover: oklch(0.97 0 0); /* 245 245 245*/
    --calendar-text-today: var(--dark-brand);
    --calendar-text-today-hover: var(--green);
    --calendar-today-border: 1px;
    --calendar-today-border-default: var(--dark-brand);
    --calendar-today-border-default-hover: var(--dark-brand);
    --calendar-bg-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --calendar-bg-default-hover: oklch(0.97 0 0); /* 245 245 245*/
    --calendar-text-default: var(--primary);
    --calendar-text-default-hover: var(--green);
    --calendar-text-font-size: 0.875rem;
    --calendar-default-border: 0;
    --calendar-default-border-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --calendar-default-border-hover: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --calendar-dialog-bg-default: oklch(1 0 0); /* 255 255 255 */
    --calendar-cell-radius: 0.375rem;
    --calendar-dialog-radius: 0.75rem;
    --calendar-dialog-border: 1px;
    --calendar-dialog-border-default: oklch(
        0.93 0.0126 255.51
    ); /* 226 232 240 */
    /* Phone Input */
    --phone-border-default: var(--default-border);
    --phone-border: 1px;
    --phone-border-default-hover: var(--default-border-hover);
    --phone-px: 0.75rem;
    --phone-py: 0.75rem;
    --phone-bg-default: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --phone-bg-default-hover: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --phone-border-error: var(--input-border-error);
    --phone-border-error-hover: var(--input-border-error); /* 190 2 2 */
    --phone-text-default: var(--primary);
    --phone-text-default-hover: oklch(0.63 0.2577 29.23); /* 255 0 0 */
    --phone-label-font-size: var(--default-input-font-size);
    --phone-label-fw: 400;
    --phone-radius: 0.375rem;
    --phone-input-font-size: var(--input-font-size);
    --phone-bg-disabled: oklch(0.96 0 0); /* 240 240 240 */
    --phone-border-disabled: oklch(0.76 0 0); /* 176 176 176 */
    --phone-text-disabled: oklch(0.76 0 0); /* 176 176 176 */
    --phone-error-text: oklch(0.53 0.2111 28.73); /* 200 12 12 */
    --phone-error-font-size: 1rem;
    --phone-error-font-family: var(--base-font-family);
    --phone-error-fw: 400;
    --phone-assistive-text: oklch(0.53 0.2111 28.73); /* 200 12 12 */
    --phone-assistive-font-size: 1rem;
    --phone-assistive-font-family: var(--base-font-family);
    --phone-assistive-fw: 400;
    --phone-before-h: 2.938rem;
    /* Icon Radio */
    --icon-radio-px: 1.5rem;
    --icon-radio-py: 1.5rem;
    --icon-radio-radius: 0.375rem;
    --icon-radio-border: 1px;
    --icon-radio-border-default: var(--default-border);
    --icon-radio-border-hover: var(--default-border);
    --icon-radio-border-disabled: oklch(0.89 0 0); /* 217 217 217 */
    --icon-radio-bg-default: oklch(1 0 0); /* 255 255 255 */
    --icon-radio-bg-selected: oklch(0.95 0.0353 192.23); /* 214 248 246 */
    --icon-radio-bg-selected-disabled: oklch(0.96 0 0); /* 240 240 240 */
    --icon-radio-border-selected: oklch(0.72 0.1172 187.79); /* 42 188 178 */
    --icon-radio-bg-error: oklch(1 0 0 / 0%); /* 255 255 255 0 */
    --icon-radio-bg-error-hover: oklch(0.56 0.2305 29.23); /* 220 0 0 */
    --icon-radio-bg-error-selected: oklch(0.56 0.2305 29.23); /* 220 0 0 */
    --icon-radio-bg-error-hover-selected: oklch(
        0.56 0.2305 29.23
    ); /* 220 0 0 */
    --icon-radio-text-error: oklch(0.46 0.0261 256.8); /* 79 89 103 */
    --icon-radio-text-error-hover: oklch(1 0 0); /* 255 255 255 */
    --icon-radio-text-error-selected: oklch(1 0 0); /* 255 255 255 */
    --icon-radio-text-error-hover-selected: oklch(1 0 0); /* 255 255 255 */
    --icon-radio-icon-error: oklch(0.46 0.0261 256.8); /* 79 89 103 */
    --icon-radio-icon-error-hover: oklch(1 0 0); /* 255 255 255 */
    --icon-radio-icon-error-selected: oklch(1 0 0); /* 255 255 255 */
    --icon-radio-icon-error-hover-selected: oklch(1 0 0); /* 255 255 255 */
    --icon-radio-border-error: oklch(0.56 0.2305 29.23); /* 220 0 0 */
    --icon-radio-border-error-hover: oklch(0.56 0.2305 29.23); /* 220 0 0 */
    --icon-radio-border-error-selected: var(--dark-brand);
    --icon-radio-border-error-hover-selected: var(--dark-brand);
    --icon-radio-border-selected-disabled: oklch(0.89 0 0); /* 217 217 217 */
    --icon-radio-bg-hover: oklch(0.96 0 0); /* 240 240 240 */
    --icon-radio-control-bg: oklch(1 0 0); /* 255 255 255 */
    --icon-radio-bg-disabled: oklch(0.99 0 0); /* 250 250 250 */
    --icon-radio-text-default: var(--dark-brand);
    --icon-radio-text-hover: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --icon-radio-text-checked: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --icon-radio-text-checked-hover: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --icon-radio-text-disabled: oklch(0.89 0 0); /* 217 217 217 */
    --icon-radio-icon-default: var(--dark-brand);
    --icon-radio-icon-hover: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --icon-radio-icon-checked: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --icon-radio-icon-checked-hover: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --icon-radio-icon-disabled: oklch(0.89 0 0); /* 217 217 217 */
    --icon-radio-font-size: 1.125rem;
    --icon-radio-icon-size: 2.25rem;
    --icon-radio-gap: 1rem;
    /*  Product Card  */
    --product-card-header-default: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --product-card-header-font-size: 2rem;
    --product-card-header-font: var(--title-font);
    --product-card-default-font: var(--default-font);
    --product-card-header-fw: 700;
    --product-card-usp-default: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --product-card-usp-font-size: 1.125rem;
    --product-card-price-default: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --product-card-price-font-size: 3rem;
    --product-card-price-font: var(--default-font);
    --product-card-price-fw: 700;
    --product-card-vat-default: oklch(0.16 0.0588 258.24); /* 0 11 37 */
    --product-card-vat-opacity: 0.5;
    --product-card-vat-font-size: 1.125rem;
    --product-card-link-color: oklch(0.72 0.1172 187.79); /* 42 188 178 */
    --product-card-link-font: var(--default-font);
    --product-card-link-font-size: 1.125rem;
    --product-card-icon-w: 1.063rem;
    --product-card-icon-h: 1.063rem;
    --product-card-icon-container-w: 1.625rem;
    --product-card-icon-container-h: 1.625rem;
    --product-card-icon-color: oklch(0.55 0.0407 257.42); /* 100 116 139 */
    --product-card-item-gap: 0.25rem;
    --product-card-icon-pt: 0.25rem;
    --product-card-icon-pb: 0;
    --product-card-default-font-size: 1.5rem;
    --prodcut-card-item-color: var(--muted-text);
    /*Total Indication Section Variables*/
    --total-indication-bg: oklch(0.96 0 0); /* 240 240 240 */
    --total-indication-radius: 0.375rem;
    /* Spinner */
    --spinner-w: 1rem;
    --spinner-h: 1rem;
    --spinner-default: oklch(0.83 0.0036 247.87); /* 198 200 202 */
    /* File Upload */
    --file-upload-px: 0.75rem;
    --file-upload-py: 0.75rem;
    --file-upload-bg-default: oklch(1 0 0); /* 255 255 255 */
    --file-upload-bg-disabled: oklch(0.93 0.0126 255.51); /* 226 232 240 */
    --file-upload-bg-drop-target: oklch(1 0 0); /* 255 255 255 */
    --file-upload-border-default: var(--default-border);
    --file-upload-border-hover: var(--default-border-hover);
    --file-upload-border-error: oklch(0.6 0.247673 29.2339); /* 242 0 0; */
    --file-upload-radius: 0.25rem;
    --file-upload-border-drop-target: var(--green);
    --file-upload-button-bg-default: oklch(1 0 0); /* 255 255 255 */
    --file-upload-button-bg-hover: oklch(1 0 0); /* 255 255 255 */
    --file-upload-button-text-default: var(--primary);
    --file-upload-button-text-hover: var(--primary);
    --file-upload-button-font-size: 1.125rem;
    --file-upload-button-fw: 400;
    --file-upload-button-border-default: var(--default-border);
    --file-upload-button-border-hover: var(--default-border-hover);
    --file-upload-button-radius: 0.25rem;
    --file-upload-button-px: 0.75rem;
    --file-upload-button-py: 0.375rem;
    --file-upload-drop-zone-label-text-default: var(--primary);
    --file-upload-drop-zone-label-font-size: 1.125rem;
    --file-upload-drop-zone-label-fw: 400;
    --file-upload-divider-pb: 1rem;
    --file-upload-divider-mb: 1rem;
    --file-upload-divider-default: var(--default-border);
    --file-upload-divider-border: 1px;
    --file-upload-place-holder-text: var(--primary);
    --file-upload-place-holder-font-size: 1.125rem;
    --file-upload-place-holder-fw: 400;
    --file-upload-assistive-text: var(--primary);
    --file-upload-assistive-font-size: 1rem;
    --file-upload-assistive-fw: 400;
    --file-upload-preview-radius: 0.375rem;
    --file-upload-preview-bg: oklch(0.97 0.0069 247.9); /* 241 245 249 */
    --file-upload-file-name-text: var(--primary);
    --file-upload-file-name-font-size: 1.125rem;
    --file-upload-file-name-fw: 500;
    --file-upload-file-size-bg: var(--green);
    --file-upload-file-size-text: var(--primary);
    --file-upload-file-size-font-size: 0.75rem;
    --file-upload-file-size-fw: 500;
    --file-upload-failed-text: var(--text-error);
    --file-upload-failed-font-size: 1.125rem;
    --file-upload-failed-fw: 500;
    /* Switch */
    --switch-px: 0.5rem;
    --switch-py: 0.5rem;
    --switch-bg-default: var(--default-border);
    --switch-bg-hover: oklch(0.71 0.0351 256.79); /* 148 163 184 */
    --switch-bg-active: var(--green);
    --switch-radius: 9999px;
    --switch-w: 2.25rem;
    --switch-h: 1.125rem;
    --switch-button-bg: oklch(1 0 0); /* 255 255 255 */
    --switch-button-radius: 9999px;
    --switch-button-h: 0.875rem;
    --switch-button-w: 0.875rem;
    --swith-button-translate: 128%;
    --switch-assistive-text: oklch(0.45 0.0374 257.28); /* 71 85 105 */
    --switch-assistive-font-size: 0.875rem;
    --switch-assistive-fw: 400;
    /* Tooltip */
    --tooltip-bg-default: oklch(0.13 0.0406 264.7); /* 2 6 23 */
    --tooltip-border-default: oklch(0.13 0.0406 264.7); /* 2 6 23 */
    --tooltip-text-default: oklch(1 0 0); /* 255 255 255 */
    --tooltip-radius: 0.375rem;
    --tooltip-fw: 600;
    --tooltip-font-size: 1.125rem;
    --tooltip-px: 0.625rem;
    --tooltip-py: 0.375rem;
    --tooltip-w: 28rem;
    /* Divider */
    --hr-mt: 2.5rem;
    --hr-mb: 2.5rem;
    --hr-border-default: oklch(0.93 0.0126 255.51); /* 226 232 240 */
}

/* Safari height issue */
@supports (-webkit-appearance: none) {
    input.orderflow-phone-input {
        height: 46px;
    }
}

.agreement-control p,
.product-question-control p {
    font-size: var(--default-font-size);
}

.agreement-control.agreement-control--info p:last-child {
    font-size: var(--default-font-size);
    display: inline;
}
.agreement-control.agreement-control--info + button {
    position: relative;
    top: 0.25rem;
}

.agreement-control a,
.product-question-control a {
    color: var(--green);
    text-decoration: underline;
}

.agreement-control ul,
.product-question-control ul,
.agreement-control ol,
.product-question-control ol {
    padding-left: 1.75rem;
}

.agreement-control--contract-summary h1 {
    display: inline-block;
    margin-bottom: 1rem;
}

.agreement-control:not(.agreement-control--contract-summary) > h2 + ul {
    margin-top: 1.5rem;
}

.agreement-control:not(.agreement-control--contract-summary) ul li:has(> a)::marker {
    color: var(--green);
}

.agreement-control ul > li,
.product-question-control ul > li {
    list-style-type: disc;
}

.agreement-control ol > li,
.product-question-control ol > li {
    list-style-type: decimal;
}

.agreement-control h1,
.agreement-control h2,
.agreement-control h3,
.agreement-control h4,
.agreement-control h5,
.agreement-control h6,
.product-question-control h1,
.product-question-control h2,
.product-question-control h3,
.product-question-control h4,
.product-question-control h5,
.product-question-control h6 {
    font-weight: bold;
    color: var(--primary);
}

.agreement-control h1 {
    font-size: 1.5rem;
    font-family: var(--title-font);
}

.product-question-control h1 {
    font-size: 2em;
}

.product-question-control h2 {
    font-size: 1.5em;
}

.product-question-control h3 {
    font-size: 1.17em;
}

.product-question-control h4 {
    font-size: 1em;
}

.product-question-control h5 {
    font-size: 0.83em;
}

.product-question-control h6 {
    font-size: 0.67em;
}

.agreement-control--contract-summary {
    background-color: var(--green-subtle);
    padding: 1.5rem;
}

.agreement-control--contract-summary h2 + p:not(:last-child) {
    margin-bottom: 1.5rem;
}

.agreement-control__toggle .agreement-control__toggle-content {
    display: none;
}

.agreement-control__toggle.agreement-control__toggle--open
    .agreement-control__toggle-content {
    display: block;
}

.agreement-control__toggle.agreement-control__toggle--open button > svg {
    transform: rotate(90deg);
}

.logo {
    width: 100px;
    height: auto;
}

.postcode_form_container {
    margin: 1.5rem auto;
}
.form-container {
    padding: 3rem 1rem;
    margin: 0 auto;
}

/*Label Styles*/
.label-default-style {
    font-size: var(--label-font-size) !important;
    color: var(--label-text-default);
    line-height: 1.5;
}

.label-optional-style {
    color: var(--optional-label-default) !important;
    line-height: 1.27;
}
/*Card Styles*/
.card-title-default {
    color: var(--card-title-default);
}
/*Modal Styles*/
.orderflow-modal {
    overflow: hidden;
}

.orderflow-modal .orderflow-modal-header button:focus-visible {
    outline-width: var(--outline-width-focus-ring-width);
    outline-color: var(--focus-ring);
}

.orderflow-calendar button:focus-visible,
.orderflow-single-select[aria-expanded="true"] {
    outline-width: var(--outline-width-focus-ring-width);
    outline-color: var(--focus-ring);
}

.orderflow-date-control > button {
    cursor: pointer;
    position: relative;
}

.orderflow-date-control > button::after {
    content: "";
    background: transparent;
    width: 100%;
    height: 200%;
    position: absolute;
    left: -25%;
    top: -50%;
}

.orderflow-calendar [role="gridcell"][aria-disabled="true"] {
    font-size: var(--text-calendar-text-font-size);
}

.orderflow-link-btn[data-focused="true"] {
    outline: none !important;
}

.orderflow-link-btn[data-focus-visible="true"] {
    outline: var(--focus-ring) solid var(--outline-width-focus-ring-width) !important;
    outline-offset: 8px !important;
}

.orderflow-calendar-today,
.orderflow-calendar-selected {
    font-size: var(--text-calendar-text-font-size);
}

.orderflow-calendar-today {
    color: var(--color-calendar-text-today);
}

.orderflow-phone-input-dropdown {
    max-height: 450px !important;
}

.orderflow-phone-input-dropdown > div.w-full {
    height: fit-content !important;
}

.orderflow-phone-input-dropdown ul {
    height: calc(100% - 41px) !important;
}

.orderflow-phone-input-dropdown .input-search-input {
    height: 41px !important;
}

.orderflow-phone-input-dropdown .input-search-input + button {
    top: 0.56rem;
}

.orderflow-phone-input-dropdown .input-search-input:focus,
.orderflow-phone-input-dropdown .input-search-input:focus-visible {
    outline-width: var(--outline-width-focus-ring-width) !important;
    outline-color: var(--focus-ring) !important;
}

/* =============================== RESPONSIVE STYLES =============================== */
@media (width >= 48rem) {
    .form-container {
        max-width: 48.125rem;
    }
}

@media (width <= 64rem) {
    :root {
        /* Card */
        --card-px: 1.5rem;
        --card-py: 1.5rem;
        /* Stepper */
        --stepper-container-px: 1rem;
        --stepper-container-py: 1rem;
    }
}