/*--------------------*/
/*  Form Block        */
/*--------------------*/
.form-block {--space: 1.25rem;}
.form-block .row {--bs-gutter-x: var(--space);--bs-gutter-y: var(--space);}
.form-block > * {margin-bottom: var(--space);}
.form-block > *:last-child {margin-bottom: 0;}
.form-block-title > * + * {margin-top: var(--sp-16-12);}
/*--------------------*/
/*  Inputs            */
/*--------------------*/
:root{--int-height: 3.25rem;--int-pd: 1rem;}
.input-field {--font-size: 1rem;display: block;position: relative;text-align: left;line-height: 0;font-size: var(--font-size);}
.input {position: relative;z-index: 1;font-weight: 400;font-size: var(--font-size);line-height: var(--int-height);height: var(--int-height);padding: 0.5rem var(--int-pd);text-overflow: ellipsis;color: var(--clr-black);border: 0.0625rem solid var(--clr-border);transition: var(--transition-1);border-radius: var(--rd-1);background-color: var(--clr-white);}
textarea.input {height: 7rem;line-height: 1.38em;}
.input-placeholder {display: inline-block;pointer-events: none;position: absolute;text-align: left;z-index: 2;top: 0;left: calc(var(--int-pd) - 0.25em);transform: translateY(calc((var(--int-height) - 1.25em) / 2));font-size: 1rem;line-height: 1.25em;font-weight: 400;color: var(--clr-input);padding-inline: 0.25rem;max-width: calc(100% - var(--int-pd) * 2);display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;background-color: var(--clr-white);transition: .2s;}
textarea.input + .input-placeholder {transform: translateY(var(--int-pd));}
.password-control, .input-icon {--size: 1.75rem;cursor: pointer;display: block;position: absolute;z-index: 3;top: 0.75rem;right: calc(var(--int-pd) - 0.4375rem);width: var(--size);height: var(--size);background-image: url(../img/icons/icon-eye-off.svg);background-repeat: no-repeat;background-position: center;background-size: 50%;}
.input-icon:has(svg, img) {background-image: none;display: inline-flex;align-items: center;justify-content: center;}
.password-control.view {background-image: url(../img/icons/icon-eye.svg);}
.input-error {font-size: 0.75rem;line-height: 1.5em;font-weight: 400;color: var(--clr-red);margin-top: 0.125rem;display: none;}
.input-success {font-size: 0.75rem;line-height: 1.5em;font-weight: 400;color: var(--clr-green);margin-top: 0.125rem;display: none;}
.input-field.focus {z-index: 5;}
.input-field.focus .input-placeholder,
.input-field.value .input-placeholder {font-size: calc(var(--font-size) * 0.75);transform: translateY(-0.625em);}
.input-field:where(.focus) .input {border-color: var(--clr-black);}
.input-field.invalid:not(.value) .input,
.input-field.invalid-email .input {border-color: var(--clr-red);}
.input-field.invalid:not(.value) .input-error,
.input-field.invalid-email .input-error {display: block;}
.input-field:has(.input-icon) .input {padding-right: calc(var(--int-pd) + 1.75rem);}

/* Fieldset + legend variant for border gap labels */
.input-field.has-legend {
  position: relative;
  margin: 0;
  padding: 0;
}

.input-field.has-legend > fieldset {
  min-inline-size: 0;
  border: 0.0625rem solid var(--clr-border);
  border-radius: var(--rd-1);
  background-color: var(--clr-white);
  min-height: var(--int-height);
  margin: 0;
  padding: 0;
}

.input-field.has-legend .input-legend {
  display: none;
  height: 0;
  line-height: 0;
  margin: 0 0 0 calc(var(--int-pd) - 0.2rem);
  padding: 0 0.25rem;
  font-size: calc(var(--font-size) * 0.75);
  font-weight: 400;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  background-color: transparent;
}

.input-field.has-legend .input-placeholder {
  background-color: transparent;
}

.input-field.has-legend .input {
  border: 0;
  box-shadow: none;
  border-radius: inherit;
  background: transparent;
}

.input-field.has-legend .wpcf7-form-control-wrap {
  display: block;
}

.input-field.has-legend:where(.focus) > fieldset {
  border-color: var(--clr-black);
}

.input-field.has-legend:where(.focus, .value) .input-legend {
  display: block;
}

.input-field.has-legend.invalid:not(.value) > fieldset,
.input-field.has-legend.invalid-email > fieldset {
  border-color: var(--clr-red);
}
@media (max-width: 1199px) {
:root {--int-height: 3.25rem;}
}
@media (max-width: 991px) {
  :root{--int-height: 3rem;--int-pd: 0.75rem;}
.password-control, .input-icon {top: 0.625rem;}
}
@media (max-width: 767px) {
  /* :root{--int-height: 2.75rem;} */
.password-control, .input-icon {top: 0.5rem;}
}
/*--------------------*/
/*  Autofill          */
/*--------------------*/
input.input:-webkit-autofill,
input.input:-webkit-autofill:hover,
input.input:-webkit-autofill:focus,
textarea.input:-webkit-autofill,
textarea.input:-webkit-autofill:hover,
textarea.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--clr-black);
  caret-color: var(--clr-black);
  -webkit-box-shadow: inset 0 0 0 1000px var(--clr-white);
  box-shadow: inset 0 0 0 1000px var(--clr-white);
  transition: background-color 9999s ease-out 0s;
}

.input-field.has-legend input.input:-webkit-autofill,
.input-field.has-legend input.input:-webkit-autofill:hover,
.input-field.has-legend input.input:-webkit-autofill:focus,
.input-field.has-legend textarea.input:-webkit-autofill,
.input-field.has-legend textarea.input:-webkit-autofill:hover,
.input-field.has-legend textarea.input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px transparent;
  box-shadow: inset 0 0 0 1000px transparent;
}
/*--------------------*/
/*  Checkbox & Radio  */
/*--------------------*/
.ch-box-wrap {display: flex;gap: var(--sp-16-12) var(--sp-32-12);flex-wrap: wrap;}
.checkbox-entry-inner {display: flex;flex-direction: column;gap: var(--sp-16-12);}
.ch-box {--ch-size: 1rem;--lh-size: var(--ch-size);cursor: pointer;font-size: var(--ch-size);line-height: var(--lh-size);font-weight: 400;color: var(--clr-text);text-align: left;gap: 0.375rem;display: inline-flex;align-items: center;transition: color var(--transition-1);}
.ch-box a {color: var(--clr-black);text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: 2px;text-decoration-color: transparent;}
.ch-box input[type=radio],
.ch-box input[type=checkbox] {display: inline-block;position: relative;vertical-align: text-top;color: var(--clr-text);height: var(--lh-size);width: var(--lh-size);flex-shrink: 0;align-self: baseline;border-radius:2px;border: 0.0625rem solid var(--clr-border);transition: border-color var(--transition-1)}
.ch-box input[type=radio]:before,
.ch-box input[type=checkbox]:before {content: "";position: absolute;top: 50%;left: 50%;display: block;width: 0.5rem;height: 0.5rem;margin-top: -0.25rem;margin-left: -0.25rem;transform: scale(0);border-radius: inherit;background-color: currentColor;transition: var(--transition-1);}
.ch-box input[type=radio]:checked,
.ch-box input[type=checkbox]:checked {color: var(--clr-title);background-color: var(--clr-primary);border-color: var(--clr-primary);}
.ch-box input[type=radio]:checked + span,
.ch-box input[type=checkbox]:checked + span {color: var(--clr-black);}
.ch-box input[type=radio]:checked:before {transform: scale(1);}
.ch-box input[type=radio] {border-radius: 100%;}
.ch-box input[type=checkbox]:before {left: 50%;top: 50%;width: 40%;height: 60%;border-bottom: solid 1px var(--clr-black);border-right: solid 1px var(--clr-black);transform: rotate(45deg) scale(0);margin-top: -0.4rem;margin-left: -0.2rem; background: transparent;border-radius: 0;}
.ch-box input[type=checkbox]:checked:before {transform: rotate(45deg) scale(1);}
@media (min-width: 1200px) {
.ch-box a:not(.btn):hover {text-decoration-color: currentColor;}
.ch-box:hover{color: var(--clr-title);}
.ch-box:hover input[type=radio]:not(:checked),
.ch-box:hover input[type=checkbox]:not(:checked) {border-color: var(--clr-title);}
}
@media (max-width: 575px) {
.ch-box-wrap {align-items: flex-start;flex-direction: column;}
.ch-box {font-size: 0.75rem;}
}
/*--------------------*/
/*  Select            */
/*--------------------*/
.SumoSelect {--sel-p: 1rem;--sel-h: 3.25rem;--sel-fz: 1rem;--sel-items: 5;--opt-p: 0.625rem;--opt-lh: calc(var(--sel-fz) * 1.125);--max-height: calc((var(--opt-p) * 2 + var(--opt-lh)) * var(--sel-items) + var(--opt-p) * 2);cursor: pointer;z-index: 1;width: 100%;}
.SumoUnder {z-index: 0;padding: 0;margin: 0;line-height: 0;font-size: 0;display: none;backface-visibility: hidden;}
.SumoSelect > .CaptionCont {z-index: 1;text-align: left;height: var(--sel-h);padding: var(--sel-p);padding-right: calc(var(--sel-p) * 2.5);background: var(--clr-white);border-radius: var(--rd-1);color: var(--clr-black);border: 0.0625rem solid var(--clr-border);transition: var(--transition-1);}
.SumoSelect > .CaptionCont > span {cursor: pointer;padding-right: 0;font-size: var(--sel-fz);font-weight: 400;line-height: calc(var(--sel-h) - var(--sel-p) * 2);color: var(--clr-black);backface-visibility: hidden;}
.SumoSelect > .CaptionCont > span.placeholder {font-style: normal;color: var(--clr-text);display: none;}
.SumoSelect > .CaptionCont > label {display: inline-block;cursor: pointer;width: 1.25rem;height: 1.25rem;color: var(--clr-primary);right: var(--sel-p);bottom: auto;top: 50%;transform: translateY(-50%);transition: var(--transition-1);}
.SumoSelect > .CaptionCont > label i {background-image: none;opacity: 1;width: 0.625rem;height: 0.625rem;top: 40%;left: 50%;right: auto;bottom: auto;color: currentColor;border-right: 0.0625rem solid currentColor;border-bottom: 0.0625rem solid currentColor;transform: translate(-50%, -50%) rotate(45deg);}
.SumoSelect > .optWrapper {display: block;overflow: auto;z-index: 2;padding: 0;top: 100%;left: 0;width: 100%;border: 0.0625rem solid var(--clr-black);border-top: none;border-radius: var(--rd-1);opacity: 0;visibility: hidden;backface-visibility: hidden;background-color: var(--clr-white);box-shadow: 0 0.625rem 1rem 0 rgba(0, 0, 0, 0.07);transition: 0s;}
.SumoSelect > .optWrapper > .options {font-size: var(--sel-fz);max-height: var(--max-height);padding: 0;border-radius: var(--rd-1) !important;}
.SumoSelect > .optWrapper > .options li.opt {padding: 0;border-bottom: 0;}
.SumoSelect > .optWrapper > .options li label {white-space: unset;text-align: left;padding: var(--opt-p) var(--sel-p);font-size: var(--sel-fz);line-height: var(--opt-lh);font-weight: 400;color: var(--clr-title);transition: var(--transition-1);}
.SumoSelect > .optWrapper > .options li.opt.selected label {color: var(--clr-title);background-color: var(--clr-primary);}
.SumoSelect > .optWrapper > .options > .opt.disabled:first-child {display: none !important;}
.SumoSelect > .optWrapper > .options li.group > label {padding: var(--opt-p) var(--sel-p);font-weight: 600;}
.SumoSelect > .optWrapper > .options li ul li.opt {padding-left: var(--opt-p);}
.SumoSelect:focus > .CaptionCont,
.SumoSelect:hover > .CaptionCont {box-shadow: none;border-color: var(--clr-grey);}
.SumoSelect.open > .CaptionCont {border-color: var(--clr-black);}
.SumoSelect.open > .CaptionCont > label {transform: translateY(-50%) rotateX(180deg);}
.SumoSelect.open > .optWrapper {top: 100%;opacity: 1;visibility: visible;transition: var(--transition-1);transition-delay: 0.2s;}
.SumoSelect.open .search-txt {padding: var(--sel-p);border-radius: var(--rd-1);font-size: var(--sel-fz);font-weight: 400;line-height: calc(var(--sel-h) - var(--sel-p) * 2);color: var(--clr-text);}
.SumoSelect.open .no-match {font-size: 0.875rem;font-weight: 400;padding: var(--sel-p);color: var(--clr-title);}
.SumoSelect.disabled {opacity: 0.5;}
.SumoSelect.disabled > .CaptionCont {cursor: not-allowed;}
.SumoSelect.disabled > .CaptionCont > span {cursor: not-allowed;}

.sort-select .SumoSelect > .CaptionCont {border-color: transparent;height: 2.5rem;background-color: var(--bg-1);padding-block: 0;display: flex;align-items: center;}
.sort-select .SumoSelect > .optWrapper{border-top: solid 1px var(--clr-black);}
@media (min-width: 1200px) {
.SumoSelect > .optWrapper > .options li.opt:hover label {background-color: var(--clr-grey);color: var(--clr-black);}
}
@media (max-width: 1199px) {
.SumoSelect {--sel-h: 3.25rem;}
}
@media (max-width: 991px) {
.SumoSelect {--sel-p: 0.75rem;--sel-h: 3rem;--sel-fz: 0.875rem;}
}
@media (max-width: 767px) {
.SumoSelect {--sel-h: 2.75rem;--sel-fz: 0.75rem;}
}
/* file input */
input[type=file] {
    display: none;
}

.file-input:has(input[type=file]:disabled) {
    pointer-events: none;
    opacity: 0.5;
}

.file-input:has(input[type=file]:disabled) * {
    pointer-events: none;
}

.file-input-label {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    border-radius: var(--rd-1);
    background: var(--clr-light-blue);
    color: var(--clr-white);
    font-size: var(--text-s);
    padding: 0.25rem;
    line-height: 1;
}

.file-input__box {
    position: relative;
    padding: var(--sp-24-12);
    border-radius: var(--rd-1);
    background: var(--bg-1);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: dashed 1px var(--clr-border);
    transition: border var(--transition-1);
    line-height: 1.2;
    cursor: pointer;
}

.file-input__box > svg {
    color: var(--clr-primary);
    width: 1.5rem;
    height: 1.5rem;
}

.file-input__box .btn-link {
    text-transform: uppercase;
    text-decoration: underline;
}


.file-input__box * {
    pointer-events: none;
}

.file-input__box.drag-enter {
    border-color: var(--clr-primary);
}

.file-input__loaded-files {
    padding-top: 1rem;
    gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    transition: padding var(--transition-1);
    align-items: flex-start;
}

.file-input__loaded-files:empty {
    padding-top: 0;
}

.file-input__file {
    display: inline-flex;
    align-items: flex-start;
    font-size: 1rem;
    color: var(--clr-black);
    gap: 0.5rem;
    position: relative;
    line-height: 1.2;
}

.file-input__file-image {
    overflow: hidden;
}

.file-input__file-name-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-self: center;
    min-width: 9.375rem;
    max-width: 18.75rem;
    font-size: 1rem;
}

.file-input__file-name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.file-input__remove-btn {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    top: 0;
    margin-left: 0.25rem;
    cursor: pointer;
    transition: color var(--transition-1);
}

.file-input__remove-btn svg {
    width: 100%;
    height: 100%;
}

.file-input__remove-btn svg:nth-child(2) {
    display: none;
}

.file-input__file.is-loading .file-input__remove-btn svg:nth-child(2), .file-input__file.invalid .file-input__remove-btn svg:nth-child(2) {
    display: block;
}

.file-input__file.is-loading .file-input__remove-btn svg:nth-child(1), .file-input__file.invalid .file-input__remove-btn svg:nth-child(1) {
    display: none;
}

.file-input__file.invalid .file-input__file-image {
    color: var(--clr-red);
}

.file-input__file.is-loading .file-input__file-name-wrap::before, .file-input__file.is-loading .file-input__file-name-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.25rem;
    background: var(--bg-2);
    z-index: 2;
    border-radius: 0.25rem;
}

.file-input__file.is-loading .file-input__file-name-wrap::after {
    position: relative;
    z-index: 1;
}

.file-input__file.is-loading .file-input__file-name-wrap::before {
    width: var(--loading-progress);
    background: var(--clr-primary);
}

.file-input__file-image {
    align-self: flex-start;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-black);
}

.file-input__file-image svg {
    display: none;
}

.file-input__file-image svg:only-child {
    display: block;
}

.file-input__file-image img {
    display: block;
}

.file-input__file-error {
    color: var(--clr-red);
    font-size: 0.75rem;
}
.file-input__file-error:empty {
    display: none;
}

@media (min-width: 1200px) {
    .file-input__box:not(.photo-input):hover {
        border-color: var(--clr-primary);
    }

    .file-input__remove-btn:hover {
        color: var(--clr-red);
    }
}

/* rate input */
.rate-input-wrap{display: inline-flex;align-items: center;gap: var(--sp-16-10);}
.rate-input {display: inline-flex;flex-direction: row-reverse;gap: 0.5rem;}
.rate-input input[type=radio] {position: absolute;opacity: 0;pointer-events: none;}
.rate-input label {cursor: pointer;display: block;color: var(--clr-border);transition: color var(--transition-1);}
.rate-input label svg {display: block;width: 1.5rem; height: 1.5rem;}
.rate-input label:has(input:checked),
.rate-input label:has(input:checked) ~ label {color: #FDA900;}
@media (min-width: 1200px) {
/* on hover: fill the hovered star and all higher-value stars to its left */
.rate-input:hover label:hover,
.rate-input:hover label:hover ~ label {color: #FDA900;}
}