body {
background-color: #f5f6f7
}
.lock body {
overflow: hidden;
touch-action: none;
-ms-scroll-chaining: none;
overscroll-behavior: none
}
.wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden
}
@supports (overflow:clip) {
.wrapper {
overflow: clip
}
}
.wrapper>main {
flex: 1 1 auto
}
.wrapper>* {
min-width: 0
}
[class*=__container] {
max-width: 102.5rem;
margin: 0 auto;
padding: 0 1.25rem
}
.select {
min-width: 0;
position: relative
}
.select__body {
position: relative
}
.select__title {
color: inherit;
text-align: left;
border: 1px solid #d9d9d9;
background-color: #fff;
cursor: pointer;
width: 100%;
border-radius: 4px
}
.select__value {
display: flex;
min-width: 0;
align-items: center;
height: 1.875rem;
padding: 0 .9375rem;
gap: .625rem
}
.select__value>* {
flex: 1 1 auto
}
.select__value:after {
content: "";
align-self: stretch;
flex: 0 0 10px;
transition: all .3s ease 0s;
display: flex;
justify-content: center;
align-items: center
}
._select-open .select__value:after {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg)
}
.select__value._select-pseudo-label::before {
content: attr(data-pseudo-label);
opacity: .5
}
.select__content {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.select__text {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.select__input {
width: 100%;
background-color: transparent;
height: 100%
}
.select__options {
color: #000;
position: absolute;
top: calc(100% - toRem(1));
border-radius: 0 0 4px 4px;
min-width: 100%;
left: 0;
background-color: #fff;
border-top: 0;
border: 1px solid #d9d9d9;
border-top: 0;
padding: 10px 0 5px 0
}
.select__scroll {
overflow-y: auto;
overflow-x: hidden;
max-height: 12.5rem
}
.select__option {
width: 100%;
text-align: left;
cursor: pointer;
padding: 5px 15px;
color: inherit
}
.select__option._select-selected {
background-color: #eee
}
.select__row {
display: inline-flex;
align-items: center
}
.select--show-top .select__options {
top: auto;
bottom: calc(100% - toRem(1));
border: 1px solid #d9d9d9;
border-bottom: 0;
border-radius: 4px 4px 0 0;
padding: 5px 0 10px 0
}
._select-tag {
cursor: pointer
}
body::after {
content: "";
background-color: rgba(0, 0, 0, .5);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity .8s ease 0s;
pointer-events: none;
z-index: 149
}
.popup-show body::after {
opacity: 1
}
.popup {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 30px 10px;
transition: visibility .8s ease 0s;
visibility: hidden;
pointer-events: none
}
.popup_show {
z-index: 150;
visibility: visible;
overflow: auto;
pointer-events: auto
}
.popup_show .popup__content {
visibility: visible;
-webkit-transform: scale(1);
transform: scale(1)
}
.popup__wrapper {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100%;
flex: 1 1 auto;
width: 100%;
display: flex;
justify-content: center;
align-items: center
}
.popup__content {
visibility: hidden;
-webkit-transform: scale(0);
transform: scale(0);
transition: -webkit-transform .3s ease 0s;
transition: transform .3s ease 0s;
transition: transform .3s ease 0s, -webkit-transform .3s ease 0s;
background-color: #fff;
padding: 40px;
width: 100%;
max-width: 500px;
border-radius: 20px;
position: relative;
box-shadow: 0 5px 20px rgba(0, 0, 0, .15)
}
.lock .popup__content {
visibility: visible
}
.popup__close {
position: absolute;
top: 20px;
right: 20px;
width: 30px;
height: 30px;
background: 0 0;
border: none;
cursor: pointer;
padding: 0
}
.popup__close::after,
.popup__close::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
background-color: #666
}
.popup__close::before {
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg)
}
.popup__close::after {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg)
}
.popup__close:hover::after,
.popup__close:hover::before {
background-color: #333
}
.popup__title {
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 30px;
text-align: center
}
.popup__form {
display: flex;
flex-direction: column;
gap: 20px
}
.form__group {
display: flex;
flex-direction: column;
gap: 8px
}
.form__label {
font-size: 14px;
color: #666;
font-weight: 500
}
.form__input {
padding: 12px 16px;
border: 1px solid #e1e7f0;
border-radius: 8px;
font-size: 16px;
transition: all .3s ease
}
.form__input:focus {
outline: 0;
border-color: #4c67a1;
box-shadow: 0 0 0 2px rgba(76, 103, 161, .1)
}
.form__input::-webkit-input-placeholder {
color: #999
}
.form__input:-ms-input-placeholder {
color: #999
}
.form__input::-ms-input-placeholder {
color: #999
}
.form__input::placeholder {
color: #999
}
.form__submit {
background-color: #4c67a1;
color: #fff;
border: none;
border-radius: 8px;
padding: 14px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all .3s ease;
margin-top: 10px
}
.form__submit:hover {
background-color: #374a74;
-webkit-transform: translateY(-1px);
transform: translateY(-1px)
}
.form__submit:active {
-webkit-transform: translateY(0);
transform: translateY(0)
}
.ibg {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.ibg--top {
-o-object-position: top;
object-position: top
}
.ibg--bottom {
-o-object-position: bottom;
object-position: bottom
}
.ibg--left {
-o-object-position: left;
object-position: left
}
.ibg--right {
-o-object-position: right;
object-position: right
}
.ibg--contain {
-o-object-fit: contain;
object-fit: contain
}
.calculator-container {
background: #fff;
margin: 50px auto;
border-radius: 10px;
padding: 30px;
max-width: 1200px
}
.results-summary {
display: none
}
.calculator-title {
text-align: center;
font-size: 32px;
font-weight: 600;
color: #333
}
.calculator-grid {
display: flex;
gap: 30px;
position: relative;
padding-bottom: 10px
}
.calculator-col {
display: flex;
flex-direction: column;
gap: 20px
}
.calculator-params {
position: sticky;
top: 120px;
max-width: 45rem;
flex: 1;
padding: 1px;
height: 100%;
overflow-y: auto;
padding-right: 10px
}
.calculator-params::-webkit-scrollbar {
width: 6px
}
.calculator-params::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px
}
.calculator-params::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px
}
.calculator-params::-webkit-scrollbar-thumb:hover {
background: #a1a1a1
}
.calculator-offers {
flex: 2
}
.calc-info {
font-size: 12px;
color: #666;
margin-top: 10px
}
.calc-inputs {
display: flex;
flex-direction: column;
gap: 20px
}
.calc-input {
border-radius: 10px 10px 0 0!important;
border-color: #4c67a1;
outline: 0;
font-size: 14px;
transition: all .3s ease
}
.calc-input:focus {
outline: 1px solid #4c67a1;
border-color: #4c67a1
}
.calc-row {
display: flex;
flex-direction: column;
background-color: #e7eef3;
border-radius: 10px 10px 0 0
}
.calc-label {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
font-weight: 500
}
.calc-label-title {
position: absolute;
left: 10px;
pointer-events: none;
top: 10px;
font-size: 13px;
text-align: left;
align-self: flex-start
}
.calc-value {
display: flex;
width: 100%;
font-weight: 600;
font-size: 1.1em
}
.calc-value input {
padding: 8px!important;
padding-top: 25px!important;
height: auto!important;
color: #333!important
}
.calc-value span {
margin-left: 5px
}
.percent-display {
font-size: .9em;
color: #4c67a1;
margin-left: 3px;
position: absolute;
pointer-events: none;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 10px
}
input[type=range] {
cursor: e-resize;
-webkit-appearance: sliderthumb-horizontal;
width: 100%;
height: 4px;
accent-color: #3b65ae;
border-radius: 4px;
background: #e0e0e0;
outline: 0;
transition: background .3s ease;
will-change: transform
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 13px;
height: 13px;
border-radius: 50%;
background: #3b65ae;
cursor: e-resize;
-webkit-transition: background .3s ease, -webkit-transform .1s ease;
transition: background .3s ease, -webkit-transform .1s ease;
transition: transform .1s ease, background .3s ease;
transition: transform .1s ease, background .3s ease, -webkit-transform .1s ease;
will-change: transform;
border: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
}
input[type=range]::-moz-range-thumb {
width: 13px!important;
height: 13px!important;
border-radius: 50%!important;
background: #3b65ae!important;
cursor: pointer!important;
border: none!important;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2)!important
}
input[type=range]::-ms-thumb {
width: 13px!important;
height: 13px!important;
border-radius: 50%!important;
background: #3b65ae!important;
cursor: pointer!important;
border: none!important;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2)!important
}
input[type=range]:focus::-webkit-slider-thumb {
background-color: #2a4c8e!important
}
input[type=range]:focus::-moz-range-thumb {
background-color: #2a4c8e!important
}
input[type=range]:focus::-ms-thumb {
background-color: #2a4c8e!important
}
input[type=range]:active::-webkit-slider-thumb {
background-color: #2a4c8e!important;
-webkit-transform: scale(1.2)!important;
transform: scale(1.2)!important
}
input[type=range]:active::-moz-range-thumb {
background-color: #2a4c8e!important;
transform: scale(1.2)!important
}
input[type=range]:active::-ms-thumb {
background-color: #2a4c8e!important;
transform: scale(1.2)!important
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none!important;
appearance: none!important;
width: 13px!important;
height: 13px!important;
border-radius: 50%!important;
background: #3b65ae!important;
cursor: e-resize!important;
border: none!important;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2)!important
}
input[type=range]::-moz-range-thumb {
width: 13px!important;
height: 13px!important;
border-radius: 50%!important;
background: #3b65ae!important;
cursor: pointer!important;
border: none!important;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2)!important
}
input[type=range]::-ms-thumb {
width: 13px!important;
height: 13px!important;
border-radius: 50%!important;
background: #3b65ae!important;
cursor: pointer!important;
border: none!important;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2)!important
}
.calc-summary {
margin-top: 30px;
padding: 20px;
background: #f7f9fc;
border-radius: 10px
}
.calc-summary .loan-amount {
margin-bottom: 15px;
text-align: center
}
.calc-summary .loan-amount .loan-amount-label {
display: block;
font-size: 16px;
color: #666;
margin-bottom: 8px
}
.calc-summary .loan-amount .loan-amount-value {
display: block;
font-size: 24px;
font-weight: 600;
color: #333
}
.calc-summary .calc-buttons {
display: flex;
gap: 15px;
justify-content: center
}
.calc-summary .calc-buttons .apply-btn,
.calc-summary .calc-buttons .approve-btn,
.calc-summary .calc-buttons .reset-btn {
flex: 1;
padding: 12px 20px;
border-radius: 30px;
font-size: 16px;
cursor: pointer;
transition: all .3s ease
}
.calc-summary .calc-buttons .reset-btn {
background: 0 0;
color: #4c67a1;
border: 1px solid #4c67a1
}
.calc-summary .calc-buttons .reset-btn:hover {
background: #e3f2fd
}
.calc-summary .calc-buttons .apply-btn {
background: #4c67a1;
color: #fff;
border: none;
display: none
}
.calc-summary .calc-buttons .apply-btn:hover {
background: #374a74
}
.calc-summary .calc-buttons .approve-btn {
background: #4c67a1;
color: #fff;
border: none;
display: block
}
.calc-summary .calc-buttons .approve-btn:hover {
background: #374a74
}
.calc-result {
background: #f7f9fc;
border-radius: 10px;
padding: 20px;
text-align: center
}
.calc-result .result-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 20px
}
.calc-result .credit-amount,
.calc-result .interest-rate,
.calc-result .monthly-payment {
font-size: 1rem;
color: #6d6d6d
}
.calc-result .credit-amount span:first-child,
.calc-result .interest-rate span:first-child,
.calc-result .monthly-payment span:first-child {
display: block;
margin-bottom: 8px
}
.calc-result .credit-value {
font-size: 1.6rem;
font-weight: 600;
color: #212121;
margin-top: 5px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px
}
.calc-note {
font-size: .85rem;
color: #8c8c8c;
margin: 20px 0
}
.approve-btn {
background: #4c67a1;
color: #fff;
border: none;
outline: 0;
padding: 12px 24px;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: background .2s ease
}
.approve-btn:hover {
background: #374a74
}
.rub {
font-size: .9em;
color: #848484;
margin-left: 3px
}
.mortgage-types {
display: flex;
gap: 10px;
flex-wrap: wrap;
font-size: 15px;
order: 1
}
.mortgage-type {
flex: 0 0 auto;
min-width: 140px;
display: inline-flex;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
padding: 12px 20px;
border: 1px solid #ddd;
border-radius: 30px;
cursor: pointer;
transition: all .3s ease;
color: #000
}
.mortgage-type:hover {
background-color: #f5f5f5;
border: 1px solid #4c67a1
}
.mortgage-type.active {
border-color: #4c67a1;
background-color: #4c67a1;
color: #fff
}
.mortgage-type.active p {
color: #fff!important
}
.mortgage-type p {
font-size: 15px;
font-weight: 500;
margin-bottom: 0!important
}
.results-summary {
background: #f7f9fc;
border-radius: 10px;
padding: 20px;
margin-bottom: 30px
}
.results-summary .results-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 20px
}
.results-summary .result-item {
text-align: center
}
.results-summary .result-item .result-label {
display: block;
font-size: 1rem;
color: #6d6d6d;
margin-bottom: 8px
}
.results-summary .result-item .result-value {
font-size: 1.6rem;
font-weight: 600;
color: #212121
}
.results-summary .approve-btn {
display: block;
width: 100%;
max-width: 300px;
margin: 0 auto;
background: #4c67a1;
color: #fff;
border: none;
outline: 0;
padding: 12px 24px;
border-radius: 30px;
font-size: 1rem;
cursor: pointer;
transition: background .2s ease
}
.results-summary .approve-btn:hover {
background: #374a74
}
.mortgage-offers {
height: 100%;
display: flex;
flex-direction: column;
order: 3
}
.mortgage-offers .mortgage-offers-title {
margin: 0 0 20px 0;
font-size: 24px;
font-weight: 500;
color: #2c2c2c;
text-align: center
}
.mortgage-offers .offers-info {
margin-bottom: 15px;
color: #666;
font-size: 14px;
text-align: center
}
.mortgage-offers .offers-list {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 20px
}
.mortgage-offers .offer-item {
background-color: #f3f5f7;
cursor: pointer;
border-radius: 30px;
padding: 20px;
margin-bottom: 15px;
transition: box-shadow .2s, background-color .2s, -webkit-transform .2s;
transition: transform .2s, box-shadow .2s, background-color .2s;
transition: transform .2s, box-shadow .2s, background-color .2s, -webkit-transform .2s;
-webkit-animation: fadeIn .3s ease forwards;
animation: fadeIn .3s ease forwards;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
opacity: 0;
will-change: opacity, transform;
background-color: #f3f5f7
}
.mortgage-offers .offer-item .offer-deposit,
.mortgage-offers .offer-item .offer-loan,
.mortgage-offers .offer-item .offer-total-payments {
background-color: #fff!important
}
.mortgage-offers .offer-item:hover .offer-button {
background-color: #4c67a1;
color: #fff
}
.mortgage-offers .offer-item .offer-top-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px
}
.mortgage-offers .offer-item .offer-header {
display: flex;
align-items: center;
margin-bottom: 0
}
.mortgage-offers .offer-item .bank-logo {
width: 40px;
height: 40px;
-o-object-fit: contain;
object-fit: contain;
margin-right: 12px
}
.mortgage-offers .offer-item .offer-button {
background-color: transparent;
border: 1px solid #4c67a1;
color: #4c67a1;
border-radius: 30px;
padding: 10px 16px;
font-weight: 600;
cursor: pointer;
transition: background-color .3s, color .3s, -webkit-transform .3s;
transition: background-color .3s, transform .3s, color .3s;
transition: background-color .3s, transform .3s, color .3s, -webkit-transform .3s
}
.mortgage-offers .offer-item .offer-button:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
.mortgage-offers .offer-item .offer-title h4 {
margin: 0 0 4px 0;
font-size: 16px
}
.mortgage-offers .offer-item .offer-title .bank-name {
margin: 0;
color: #666;
font-size: 14px
}
.mortgage-offers .offer-item .offer-details {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 15px
}
.mortgage-offers .offer-item .offer-details .top-row {
display: flex;
justify-content: space-between;
gap: 15px;
flex-wrap: wrap
}
.mortgage-offers .offer-item .offer-details .top-row .offer-payment,
.mortgage-offers .offer-item .offer-details .top-row .offer-rate,
.mortgage-offers .offer-item .offer-details .top-row .offer-term {
flex: 1;
min-width: 140px
}
.mortgage-offers .offer-item .offer-details .top-row .offer-payment span,
.mortgage-offers .offer-item .offer-details .top-row .offer-rate span,
.mortgage-offers .offer-item .offer-details .top-row .offer-term span {
display: block
}
.mortgage-offers .offer-item .offer-details .top-row .offer-payment .payment-label,
.mortgage-offers .offer-item .offer-details .top-row .offer-payment .rate-label,
.mortgage-offers .offer-item .offer-details .top-row .offer-payment .term-label,
.mortgage-offers .offer-item .offer-details .top-row .offer-rate .payment-label,
.mortgage-offers .offer-item .offer-details .top-row .offer-rate .rate-label,
.mortgage-offers .offer-item .offer-details .top-row .offer-rate .term-label,
.mortgage-offers .offer-item .offer-details .top-row .offer-term .payment-label,
.mortgage-offers .offer-item .offer-details .top-row .offer-term .rate-label,
.mortgage-offers .offer-item .offer-details .top-row .offer-term .term-label {
color: #666;
font-size: 13px;
margin-bottom: 4px
}
.mortgage-offers .offer-item .offer-details .top-row .offer-payment .payment-value,
.mortgage-offers .offer-item .offer-details .top-row .offer-payment .rate-value,
.mortgage-offers .offer-item .offer-details .top-row .offer-payment .term-value,
.mortgage-offers .offer-item .offer-details .top-row .offer-rate .payment-value,
.mortgage-offers .offer-item .offer-details .top-row .offer-rate .rate-value,
.mortgage-offers .offer-item .offer-details .top-row .offer-rate .term-value,
.mortgage-offers .offer-item .offer-details .top-row .offer-term .payment-value,
.mortgage-offers .offer-item .offer-details .top-row .offer-term .rate-value,
.mortgage-offers .offer-item .offer-details .top-row .offer-term .term-value {
font-size: 17px;
font-weight: 600
}
.mortgage-offers .offer-item .offer-details .bottom-row {
display: flex;
justify-content: space-between;
gap: 15px;
flex-wrap: wrap
}
.mortgage-offers .offer-item .offer-details .bottom-row .offer-deposit,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-loan,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-total-payments {
flex: 1;
min-width: 140px;
padding: 25px 8px;
background-color: #f3f5f7;
border-radius: 30px;
text-align: center;
transition: all .3s ease;
position: relative;
overflow: hidden
}
.mortgage-offers .offer-item .offer-details .bottom-row .offer-deposit span,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-loan span,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-total-payments span {
display: block;
position: relative;
z-index: 1
}
.mortgage-offers .offer-item .offer-details .bottom-row .offer-deposit .deposit-label,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-deposit .loan-label,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-deposit .total-payments-label,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-loan .deposit-label,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-loan .loan-label,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-loan .total-payments-label,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-total-payments .deposit-label,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-total-payments .loan-label,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-total-payments .total-payments-label {
color: #666;
font-size: 13px;
margin-bottom: 8px
}
.mortgage-offers .offer-item .offer-details .bottom-row .offer-deposit .deposit-value,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-deposit .loan-value,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-deposit .total-payments-value,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-loan .deposit-value,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-loan .loan-value,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-loan .total-payments-value,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-total-payments .deposit-value,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-total-payments .loan-value,
.mortgage-offers .offer-item .offer-details .bottom-row .offer-total-payments .total-payments-value {
font-size: 16px;
font-weight: 600;
transition: color .3s ease
}
.mortgage-offers .offer-item .offer-details .bottom-row .offer-total-payments {
background-color: rgba(76, 103, 161, .05);
border-color: rgba(76, 103, 161, .15)
}
.mortgage-offers .offer-item .offer-details .bottom-row .offer-total-payments .total-payments-value {
color: #4c67a1;
font-size: 17px
}
.mortgage-offers .offer-item .offer-details .offer-overpayment {
text-align: right
}
.mortgage-offers .offer-item .offer-details .offer-overpayment span {
display: inline-block
}
.mortgage-offers .offer-item .offer-details .offer-overpayment .overpayment-label {
color: #666;
font-size: 13px;
margin-right: 8px
}
.mortgage-offers .offer-item .offer-details .offer-overpayment .overpayment-value {
color: #e74c3c;
font-size: 16px;
font-weight: 600
}
.mortgage-offers .offer-item .offer-deposit span,
.mortgage-offers .offer-item .offer-loan span,
.mortgage-offers .offer-item .offer-overpayment span,
.mortgage-offers .offer-item .offer-payment span,
.mortgage-offers .offer-item .offer-rate span,
.mortgage-offers .offer-item .offer-term span,
.mortgage-offers .offer-item .offer-total-payments span {
display: block
}
.mortgage-offers .show-more-btn {
display: block;
width: 100%;
max-width: 300px;
margin: 20px auto 0;
padding: 12px;
background: 0 0;
color: #4c67a1;
border: 1px solid #4c67a1;
border-radius: 35px;
font-weight: 500;
font-size: 16px;
cursor: pointer;
transition: all .3s ease
}
.mortgage-offers .show-more-btn:hover {
background: #e3f2fd
}
.mortgage-offers .no-offers {
padding: 20px;
background: #f5f5f5;
border-radius: 8px;
text-align: center;
color: #666;
font-size: 16px
}
.sort-options {
display: flex;
gap: 20px;
margin-bottom: 20px
}
.sort-option {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer
}
.sort-option input[type=radio] {
width: 16px;
height: 16px;
margin: 0
}
.sort-option .sort-label {
font-size: 14px;
color: #333
}
.sort-option:hover .sort-label {
color: #007bff
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes fadeIn {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
.offers-buttons {
display: flex;
justify-content: center;
margin: 20px 0
}
.hide-offers-btn,
.show-more-btn {
display: block;
width: 100%;
max-width: 400px;
margin: 20px auto 0;
padding: 12px;
font-weight: 500;
font-size: 16px;
cursor: pointer;
transition: all .3s ease;
border-radius: 6px;
text-align: center
}
.show-more-btn {
background: 0 0;
color: #4c67a1;
border: 1px solid #4c67a1
}
.show-more-btn:hover {
background: #e3f2fd
}
.hide-offers-btn {
background: 0 0;
color: #666;
border: 1px solid #666
}
.hide-offers-btn:hover {
background: #f0f0f0;
color: #333
}
.filters-btn {
order: 2;
display: none;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
width: 100%;
padding: 12px 20px;
background: #4c67a1;
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background .3s ease
}
.filters-btn:hover {
background: #374a74
}
.calculator-filters {
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
overflow-y: auto
}
.calculator-filters::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
opacity: 0;
transition: opacity .3s ease
}
.calculator-filters.active {
display: block
}
.calculator-filters.active::before {
opacity: 1
}
.calculator-filters .calculator-params {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #fff;
padding: 20px;
margin: 0;
max-width: 100%;
min-height: 80vh;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
z-index: 1001
}
.calculator-filters .calculator-params.active {
-webkit-transform: translateY(0);
transform: translateY(0)
}
.calculator-params-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
position: relative
}
.close-filters-btn {
background: 0 0;
border: none;
font-size: 32px;
color: #666;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all .3s ease
}
.close-filters-btn:hover {
background: #f5f5f5;
color: #333
}
.apply-btn {
background: #4c67a1;
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: all .3s ease;
flex: 1
}
.apply-btn:hover {
background: #374a74
}
.mobile-button-container {
margin-top: 15px
}
.offer-details {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 15px
}
.offer-details .top-row {
display: flex;
justify-content: space-between;
gap: 15px;
flex-wrap: wrap
}
.offer-details .top-row .offer-payment,
.offer-details .top-row .offer-rate,
.offer-details .top-row .offer-term {
flex: 1;
min-width: 140px
}
.offer-details .top-row .offer-payment span,
.offer-details .top-row .offer-rate span,
.offer-details .top-row .offer-term span {
display: block
}
.offer-details .top-row .offer-payment .payment-label,
.offer-details .top-row .offer-payment .rate-label,
.offer-details .top-row .offer-payment .term-label,
.offer-details .top-row .offer-rate .payment-label,
.offer-details .top-row .offer-rate .rate-label,
.offer-details .top-row .offer-rate .term-label,
.offer-details .top-row .offer-term .payment-label,
.offer-details .top-row .offer-term .rate-label,
.offer-details .top-row .offer-term .term-label {
color: #666;
font-size: 13px;
margin-bottom: 4px
}
.offer-details .top-row .offer-payment .payment-value,
.offer-details .top-row .offer-payment .rate-value,
.offer-details .top-row .offer-payment .term-value,
.offer-details .top-row .offer-rate .payment-value,
.offer-details .top-row .offer-rate .rate-value,
.offer-details .top-row .offer-rate .term-value,
.offer-details .top-row .offer-term .payment-value,
.offer-details .top-row .offer-term .rate-value,
.offer-details .top-row .offer-term .term-value {
font-size: 17px;
font-weight: 600
}
.offer-details .bottom-row {
display: flex;
justify-content: space-between;
gap: 15px;
flex-wrap: wrap
}
.offer-details .bottom-row .offer-deposit,
.offer-details .bottom-row .offer-loan,
.offer-details .bottom-row .offer-total-payments {
flex: 1;
min-width: 140px;
padding: 8px;
background-color: #f3f5f7;
border-radius: 10px;
text-align: center;
transition: all .3s ease;
position: relative;
overflow: hidden
}
.offer-details .bottom-row .offer-deposit span,
.offer-details .bottom-row .offer-loan span,
.offer-details .bottom-row .offer-total-payments span {
display: block;
position: relative;
z-index: 1
}
.offer-details .bottom-row .offer-deposit .deposit-label,
.offer-details .bottom-row .offer-deposit .loan-label,
.offer-details .bottom-row .offer-deposit .total-payments-label,
.offer-details .bottom-row .offer-loan .deposit-label,
.offer-details .bottom-row .offer-loan .loan-label,
.offer-details .bottom-row .offer-loan .total-payments-label,
.offer-details .bottom-row .offer-total-payments .deposit-label,
.offer-details .bottom-row .offer-total-payments .loan-label,
.offer-details .bottom-row .offer-total-payments .total-payments-label {
color: #666;
font-size: 13px;
margin-bottom: 8px
}
.offer-details .bottom-row .offer-deposit .deposit-value,
.offer-details .bottom-row .offer-deposit .loan-value,
.offer-details .bottom-row .offer-deposit .total-payments-value,
.offer-details .bottom-row .offer-loan .deposit-value,
.offer-details .bottom-row .offer-loan .loan-value,
.offer-details .bottom-row .offer-loan .total-payments-value,
.offer-details .bottom-row .offer-total-payments .deposit-value,
.offer-details .bottom-row .offer-total-payments .loan-value,
.offer-details .bottom-row .offer-total-payments .total-payments-value {
font-size: 16px;
font-weight: 600;
transition: color .3s ease
}
.offer-details .bottom-row .offer-total-payments {
background-color: rgba(76, 103, 161, .05);
border-color: rgba(76, 103, 161, .15)
}
.offer-details .bottom-row .offer-total-payments .total-payments-value {
color: #4c67a1;
font-size: 17px
}
.offer-details .offer-overpayment {
text-align: right
}
.offer-details .offer-overpayment span {
display: inline-block
}
.offer-details .offer-overpayment .overpayment-label {
color: #666;
font-size: 13px;
margin-right: 8px
}
.offer-details .offer-overpayment .overpayment-value {
color: #e74c3c;
font-size: 16px;
font-weight: 600
}
.offer-button {
background-color: transparent;
border: 1px solid #4c67a1;
color: #4c67a1;
border-radius: 30px;
padding: 10px 16px;
font-weight: 600;
cursor: pointer;
transition: background-color .3s, color .3s, -webkit-transform .3s;
transition: background-color .3s, transform .3s, color .3s;
transition: background-color .3s, transform .3s, color .3s, -webkit-transform .3s
}
.offer-button:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
.offer-hr {
height: 1px;
background: #b7c3dd
}
@media (min-width:768px) {
.mobile-button-container {
display: none
}
.mobile-button-container {
display: none
}
}
@media (min-width:992px) {
.close-filters-btn {
display: none!important
}
}
@media (max-width:992px) {
.calculator-title {
font-size: 22px
}
.calculator-grid {
flex-direction: column
}
.calculator-params {
position: relative;
top: 0;
max-height: none;
overflow: auto;
padding-right: 0
}
.calc-summary .calc-buttons .apply-btn {
display: block
}
.calc-summary .calc-buttons .approve-btn {
display: none
}
.calculator-grid {
flex-direction: column
}
.calculator-params {
position: relative;
top: 0;
overflow: auto;
max-height: none;
padding-right: 0
}
.filters-btn {
display: block
}
.calculator-filters {
display: block
}
.calculator-params-header {
margin-bottom: 0
}
}
@media (max-width:768px) {
.calc-result .result-grid {
grid-template-columns: 1fr
}
.results-summary .results-grid {
grid-template-columns: 1fr
}
.mortgage-offers .offer-item {
padding: 15px
}
.mortgage-offers .offer-item .offer-top-row {
flex-direction: column;
align-items: flex-start
}
.mortgage-offers .offer-item .offer-top-row .offer-button {
display: none
}
.mortgage-offers .offer-item .offer-header {
margin-bottom: 10px;
width: 100%
}
.mortgage-offers .offer-item .offer-button.mobile-button {
display: block;
width: 100%;
margin-top: 0;
padding: 12px 16px;
text-align: center;
font-size: 15px;
border-width: 1px;
border-radius: 30px
}
.mortgage-offers .offer-item .offer-button.mobile-button:hover {
-webkit-transform: none;
transform: none;
background-color: #4c67a1;
color: #fff
}
.mortgage-offers .offer-item .offer-details .top-row .offer-payment,
.mortgage-offers .offer-item .offer-details .top-row .offer-rate,
.mortgage-offers .offer-item .offer-details .top-row .offer-term {
min-width: 105px
}
.mortgage-offers .offer-item .offer-details .bottom-row {
gap: 10px
}
.mortgage-offers .offer-item .offer-details {
position: relative;
padding-bottom: 10px
}
.mortgage-offers .offer-item {
position: relative
}
.mortgage-offers .offer-item .mobile-button-container {
display: block;
width: 100%
}
.offer-details {
position: relative;
padding-bottom: 10px
}
.offer-button.mobile-button {
display: block;
width: 100%;
margin-top: 0;
padding: 12px 16px;
text-align: center;
font-size: 15px;
border-width: 1px;
border-radius: 30px
}
.offer-button.mobile-button:hover {
-webkit-transform: none;
transform: none;
background-color: #4c67a1;
color: #fff
}
.calculator-title {
margin-bottom: 0 !important;
}
}
@media (max-width:576px) {
.popup__content {
padding: 30px 20px
}
.popup__title {
font-size: 20px
}
}
@media (any-hover:hover) {
.select__option:hover {
background: #d9d9d9
}
}