.filters-guide {--transition: .25s cubic-bezier(.4,0,.2,1);}

/* FontAwesome */
.filters-guide .prog-steps .ps-item.done .ps-circle::after,
.filters-guide .step .grid .col input + label::before {font: normal normal 900 13px/1 'FontAwesome'; text-decoration: none; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

.filters-guide .prog-steps .ps-item.done .ps-circle::after,
.filters-guide .step .grid .col input:checked + label::before {content: "\f00c";}

 /* progress bar */
.filters-guide .prog-bar-wrapper {margin-bottom: 2em;}

.filters-guide .prog-bar-track {height: 4px; background-color: var(--color-grey-light4); border-radius: 4px; overflow: hidden; margin-bottom: 20px;}
.filters-guide .prog-bar-track .prog-bar-fill {width: 0%; height: 100%; background-color: var(--color-primary); border-radius: 4px; transition: width .4s ease;}

 /* progress steps */
.filters-guide .prog-steps {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 auto;}
.filters-guide .prog-steps .ps-item {display: flex; align-items: center; gap: 8px;}
.filters-guide .prog-steps .ps-item:last-child {flex: none;}

@media screen and (min-width: 320px) {
  .filters-guide .prog-steps {flex-wrap: nowrap;}
  .filters-guide .prog-steps .ps-item {flex: 1;}
}

@media screen and (min-width: 480px) {
  .filters-guide .prog-steps {max-width: 80%;}
}

.filters-guide .prog-steps .ps-item {user-select: none;}
.filters-guide .prog-steps .ps-item .ps-circle {display: flex; align-items: center; justify-content: center; width: 30px; min-width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--color-grey-light4); background-color: var(--color-white); font-size: 12px; font-weight: 700; color: var(--color-grey); flex-shrink: 0; transition: all var(--transition);}
.filters-guide .prog-steps .ps-item.active .ps-circle {border-color: var(--color-primary); background-color: var(--color-primary); color: var(--color-white);}
.filters-guide .prog-steps .ps-item.done {cursor: pointer;}
.filters-guide .prog-steps .ps-item.done .ps-circle {border-color: var(--color-primary); background-color: var(--color-primary-light2); color: var(--color-primary);}
.filters-guide .prog-steps .ps-item.done .ps-circle::after {font-size: 13px;}
.filters-guide .prog-steps .ps-item.done .ps-circle .ps-num {display: none;}

.filters-guide .prog-steps .ps-item .ps-label {font-size: 12px; font-weight: 500; color: var(--color-grey); transition: color var(--transition); white-space: nowrap;}
.filters-guide .prog-steps .ps-item.active .ps-label {color: var(--color-primary);}
.filters-guide .prog-steps .ps-item.done .ps-label {color: var(--color-grey-dark1);}

.filters-guide .prog-steps .ps-item:not(:last-child)::after {flex: 1; content: ""; height: 2px; background-color: var(--color-grey-light4); margin: 0 10px; border-radius: 2px; transition: background var(--transition);}
.filters-guide .prog-steps .ps-item.done::after {background-color: var(--color-primary);}

@media screen and (max-width: 319px) {
  .filters-guide .prog-steps .ps-item::after {display: none;}
}

@media(max-width: 620px) {
  .filters-guide .prog-steps .ps-item .ps-label {display: none}
}

/* steps */
.filters-guide .step {display: none; margin-bottom: 30px;}
.filters-guide .step.active {display: block; animation: up .3s cubic-bezier(.4,0,.2,1) both}
@keyframes up{from {opacity: 0; transform: translateY(12px);} to {opacity:1; transform:translateY(0);}}

.filters-guide .step .ico.tip::before {content: "\f0eb"; font-weight: 400; color: var(--color-primary);}

.filters-guide .step .grid {--gap: 1em; display: grid; grid-template-columns: 1fr; gap: var(--gap);}
.filters-guide .step .grid .col {min-width: 0;}

@media screen and (min-width: 568px) {
  .filters-guide .step .grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media screen and (min-width: 1200px) {
  .filters-guide .step .grid.col3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
}

.filters-guide .step .grid .col label {position: relative; display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 1em 1.4em; border: 1px solid var(--color-grey-light2); border-radius: 8px; cursor: pointer; background-color: var(--color-white); transition: all var(--transition);}


/* icon SVG */
.filters-guide .step .grid .col label .icon-wrap {display: flex; justify-content: center; align-items: center; width: 52px; min-width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--color-primary); background-color: #fff;}
.filters-guide .step .grid .col label .icon-wrap img {display: block; width: 80%; height: 80%; object-position: center center; object-fit: contain;}

/* text */
.filters-guide .step .grid .col label .label-text h3 {font-size: 15px; margin-bottom: 0.4em;}
.filters-guide .step .grid .col label .label-text p {font-size: 13px; color: var(--color-grey-dark2); margin: 0;}

/* input */
.filters-guide .step .grid .col input + label::before {display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; min-width: 20px; max-width: 20px; color: transparent; margin: 0 0 0 auto; box-shadow: none; order: 3;}

.filters-guide .step .grid .col input:checked + label,
.filters-guide .step .grid .col label:hover {border-color: var(--color-primary); background-color: var(--color-primary-light2);}

/* input checked */
.filters-guide .step .grid .col input:checked + label {box-shadow: inset 0 0 0 1px var(--color-primary);}
.filters-guide .step .grid .col input:checked + label::before {color: var(--color-white); border-color: var(--color-primary); background-color: var(--color-primary);}

/* BMI calculator */
.filters-guide .step .calc-inputs {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px;}
.filters-guide .step .input-group {display: flex; flex-direction: column; gap: 4px;}
.filters-guide .step .input-group > label {font-size: 11px; font-weight: 600; color: var(--color-grey-dark2); text-transform: uppercase;}
.filters-guide .step .input-wrap {position: relative;}
.filters-guide .step .input-wrap input[type="number"] {width: 100%; padding: 10px 34px 10px 12px; border: 1px solid var(--color-grey-light2); border-radius: 8px; font-size: 16px; font-weight: 700; color: var(--color-grey-dark1); outline: none; background-color: var(--color-white); transition: border-color var(--transition), box-shadow var(--transition);}
.filters-guide .step .input-wrap input[type="number"]::-webkit-outer-spin-button,
.filters-guide .step .input-wrap input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
.filters-guide .step .input-wrap input[type="number"] {-moz-appearance: textfield;}
.filters-guide .step .input-wrap input[type="number"]:focus {border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary);}
.filters-guide .step .input-unit {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--color-grey); font-weight: 500;}

.filters-guide .step .gender-switch {display: flex; gap: 6px;}
.filters-guide .step .gender-switch label {position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 10px; border: 1px solid var(--color-grey-light2); border-radius: 8px; cursor: pointer; background-color: var(--color-white); color: var(--color-grey-dark1); font-size: 13px; font-weight: 600; transition: border-color var(--transition), background-color var(--transition), color var(--transition), box-shadow var(--transition);}
.filters-guide .step .gender-switch label:hover,
.filters-guide .step .gender-switch label.active {border-color: var(--color-primary); background-color: var(--color-primary-light2); color: var(--color-primary);}
.filters-guide .step .gender-switch label.active {box-shadow: inset 0 0 0 1px var(--color-primary);}
.filters-guide .step .gender-switch input {position: absolute; opacity: 0; pointer-events: none;}
.filters-guide .step .gender-switch .icon-wrap {display: flex; align-items: center; justify-content: center; width: 24px; min-width: 24px; height: 24px; flex-shrink: 0;}
.filters-guide .step .gender-switch .icon-wrap img {display: block; max-width: 100%; max-height: 100%; object-fit: contain;}

.filters-guide .step .bmi-result {display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin-bottom: 12px; border: 1px solid var(--color-grey-light2); border-radius: 8px; background-color: var(--color-primary-light2);}
.filters-guide .step .bmi-num {display: flex; align-items: baseline; gap: 4px; flex-shrink: 0;}
.filters-guide .step .bmi-num .val {font-size: 22px; font-weight: 700; line-height: 1; color: var(--color-primary);}
.filters-guide .step .bmi-num .lbl {font-size: 10px; color: var(--color-grey); text-transform: uppercase;}
.filters-guide .step .bmi-divider {width: 1px; height: 30px; flex-shrink: 0; background-color: var(--color-grey-light2);}
.filters-guide .step .bmi-info h4 {font-size: 13px; font-weight: 600; color: var(--color-grey-dark1); margin: 0;}
.filters-guide .step .bmi-info p {font-size: 12px; color: var(--color-grey-dark2); line-height: 1.4; margin: 2px 0 0;}

.filters-guide .step .bmi-scale {margin-bottom: 14px;}
.filters-guide .step .bmi-scale-bar {position: relative; height: 6px; margin-bottom: 6px; border-radius: 3px; background: linear-gradient(to right, #6CB4E4 0%, #90D788 30%, #F5C842 55%, #E87F3A 75%, #D94F3D 100%);}
.filters-guide .step .bmi-indicator {display: none; position: absolute; top: -4px; left: 50%; width: 14px; height: 14px; border: 2px solid var(--color-white); border-radius: 50%; background-color: var(--color-primary); box-shadow: 0 1px 4px rgba(0,0,0,.2); transform: translateX(-50%); transition: left .4s ease;}
.filters-guide .step .bmi-labels {display: flex; justify-content: space-between; gap: 8px;}
.filters-guide .step .bmi-labels span {font-size: 10px; color: var(--color-grey); line-height: 1.3; text-align: center;}

/* buttons */
.filters-guide .step .buttons {padding-top: 20px!important; border-top: 1px solid var(--color-grey-light2);}
.filters-guide .step .buttons .text-redirect {display: none; font-size: 13px; color: var(--color-grey-dark1);}
.filters-guide .step .buttons .text-redirect.show {display: block;}

/* shake */
.shake {animation: shake .3s ease;}
@keyframes shake{0%, 100% {transform: translateX(0);} 25% {transform: translateX(-5px);} 75% {transform: translateX(5px);}}

@media(max-width: 620px) {
  .filters-guide .step .calc-inputs {grid-template-columns: repeat(2, 1fr);}
  .filters-guide .step .input-group-gender {grid-column: 1 / -1;}
}

@media(max-width: 420px) {
  .filters-guide .step .calc-inputs {grid-template-columns: 1fr;}
  .filters-guide .step .bmi-result {align-items: flex-start;}
  .filters-guide .step .bmi-labels {gap: 4px;}
  .filters-guide .step .bmi-labels span {font-size: 9px;}
}