/* Modal rat – Figma 1181:5011; wyłącznie rem */

#overlay-modal-rata {
  align-items: center;
  justify-content: center;
  background-color: rgba(10, 10, 10, 0.55);
  padding: 1.5rem;
  box-sizing: border-box;
}

#overlay-modal-rata .modal-rata,
#overlay-modal-rata .modal-rata-1 {
  position: relative;
  width: 100%;
  max-width: 75rem;
  box-sizing: border-box;
}

.modal-rata.modal-rata-1 {
  display: block;
  width: 100%;
  max-width: 75rem;
}

.modal-rata .modal-rata-panel,
.modal-rata .konsultacja.modal-rata-panel {
  align-items: stretch;
  display: block;
  flex: none;
  gap: 0;
  overflow: visible;
  width: 100%;
  position: relative;
  border-radius: 1.5rem;
  padding: 3.5rem 4rem;
  background:
    linear-gradient(0deg, rgba(64, 100, 223, 0.05), rgba(64, 100, 223, 0.05)),
    linear-gradient(0deg, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.5));
  backdrop-filter: blur(1.25rem);
  -webkit-backdrop-filter: blur(1.25rem);
  box-sizing: border-box;
}

.modal-rata .modal-rata-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  padding: 0.0625rem;
  background: linear-gradient(270deg, rgba(64, 100, 223, 0.3) 0%, #4064df 50%, rgba(64, 100, 223, 0.4) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.modal-rata .frame-6482,
.modal-rata .frame-6594,
.modal-rata .frame-65,
.modal-rata .frame-6595,
.modal-rata .frame-6590,
.modal-rata .frame-658,
.modal-rata .frame-6588,
.modal-rata .frame-6591,
.modal-rata .frame {
  display: flex;
  box-sizing: border-box;
}

.modal-rata .frame-6482 {
  flex-direction: column;
  align-items: stretch;
  gap: 2rem;
  width: 100%;
  position: relative;
  z-index: 2;
}

.modal-rata .frame-6594,
.modal-rata .frame-65 {
  flex-direction: column;
  width: 100%;
}

.modal-rata .frame-6594 {
  gap: 1.25rem;
}

.modal-rata .frame-65 {
  gap: 2rem;
}

.modal-rata .frame-6595 {
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
}

.modal-rata .sprawd-wysoko-rat,
.modal-rata #modal-rata-title {
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-family-manrope, 'Manrope', sans-serif);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}

.modal-rata .modal-rata-required-note {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-manrope, 'Manrope', sans-serif);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
}

.modal-rata .modal-rata-required-star {
  color: #e42313;
}

.modal-rata .modal-rata-fields {
  flex-direction: row;
  align-items: flex-start;
  gap: 2.5rem;
  width: 100%;
}

.modal-rata .frame-658 {
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}

.modal-rata .modal-rata-label {
  margin: 0;
  font-family: var(--font-family-manrope, 'Manrope', sans-serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

.modal-rata .modal-rata-field {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border: 0.0625rem solid #4064df;
  border-radius: 1.75rem;
  background: transparent;
  box-sizing: border-box;
}

.modal-rata .modal-rata-field--select {
  justify-content: flex-start;
}

.modal-rata .modal-rata-price,
.modal-rata .modal-rata-months {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-family-manrope, 'Manrope', sans-serif);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

.modal-rata .modal-rata-months {
  cursor: pointer;
  flex: 0 0 auto;
  width: auto;
}

.modal-rata .modal-rata-suffix,
.modal-rata .rat {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-family-manrope, 'Manrope', sans-serif);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
}

.modal-rata .rat {
  color: #acacac;
}

.modal-rata .modal-rata-results {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2.25rem 2.5rem;
  border-radius: 1.5rem;
  background: rgba(64, 100, 223, 0.1);
  box-sizing: border-box;
}

.modal-rata .modal-rata-results::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  padding: 0.0625rem;
  background: linear-gradient(270deg, #2a2c37 0%, #4064df 50%, #2a2c37 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.modal-rata .frame-6591 {
  flex-direction: row;
  gap: 2.5rem;
  width: 100%;
  position: relative;
  z-index: 1;
}

.modal-rata .frame-6588 {
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}

.modal-rata .wysoko-miesicznej-raty,
.modal-rata .cakowity-koszt {
  margin: 0;
  font-family: var(--font-family-manrope, 'Manrope', sans-serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

.modal-rata .modal-rata-result-box {
  display: flex;
  align-items: center;
  align-self: stretch;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: 1.75rem;
  background: #0c0e14;
  box-sizing: border-box;
}

.modal-rata .text-6,
.modal-rata .phone {
  font-family: var(--font-family-geist, 'Geist', sans-serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
}

.modal-rata .modal-rata-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
}

.modal-rata .oprocentowanie-stae {
  margin: 0;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 42rem;
  text-align: center;
  font-family: var(--font-family-manrope, 'Manrope', sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: #acacac;
}

.modal-rata .symulacja-ma-charakt {
  margin: 0;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 50rem;
  text-align: center;
  font-family: var(--font-family-manrope, 'Manrope', sans-serif);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #acacac;
}

.modal-rata .modal-rata-cta {
  position: relative;
  z-index: 1;
  margin-top: 0.25rem;
  text-decoration: none;
  align-items: center;
  background: #4064df;
  border: 0;
  border-radius: 1.75rem;
  display: inline-flex;
  gap: 0.75rem;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.modal-rata .modal-rata-cta:hover {
  background: #3556c8;
}

.modal-rata .modal-rata-cta-label {
  font-family: var(--font-family-geist, 'Geist', sans-serif);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

.modal-rata .modal-rata-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal-rata .modal-rata-cta-icon .arrow_right {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}

.modal-rata .close_on_white {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 5;
}

.modal-rata .close_on_white img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 48rem) {
  #overlay-modal-rata {
    padding: 0.75rem;
  }

  .modal-rata .modal-rata-panel {
    padding: 2.5rem 1.25rem 1.5rem;
  }

  .modal-rata .sprawd-wysoko-rat,
  .modal-rata #modal-rata-title {
    font-size: 1.75rem;
  }

  .modal-rata .modal-rata-fields,
  .modal-rata .frame-6591 {
    flex-direction: column;
    gap: 1.25rem;
  }

  .modal-rata .modal-rata-results {
    padding: 1.5rem 1.25rem;
  }
}