/* Card layout for payment, guarantees, and friend benefits. */

/* Payment steps — append after the existing refresh.css rules. */
@media (min-width: 992px) {
  .brz #pay .brz-css-zaonw {
    flex: 0 0 45% !important;
    max-width: 45% !important;
  }
  .brz #pay .brz-css-omyoi {
    flex: 0 0 55% !important;
    max-width: 55% !important;
  }
}

.brz #pay .brz-css-xpihs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 16px;
  margin: 0 !important;
  padding: 0 0 0 12px !important;
}

/* Brizy exports the two grid rows as separate wrappers. Flatten only these
   wrappers so the four cards share the same track sizing and gutters. */
.brz #pay .brz-css-xpihs > .brz-row__container,
.brz #pay .brz-css-xpihs > .brz-row__container > .brz-row--inner {
  display: contents !important;
}

.brz #pay .brz-css-xpihs .brz-row--inner > .brz-columns {
  position: relative;
  isolation: isolate;
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  min-height: 210px;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid #e7e3f4 !important;
  border-radius: 22px !important;
  background: linear-gradient(148deg, #ffffff 0%, #ffffff 68%, #faf8ff 100%) !important;
  box-shadow: 0 14px 38px rgba(42, 40, 111, .075), 0 2px 8px rgba(42, 40, 111, .035) !important;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.brz #pay .brz-css-xpihs .brz-row--inner > .brz-columns::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, #6b5bd5 0%, #a597ef 68%, transparent 100%);
}

.brz #pay .brz-css-xpihs .brz-row--inner > .brz-columns::after {
  content: "";
  position: absolute;
  right: -65px;
  bottom: -75px;
  width: 180px;
  height: 180px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 100, 218, .085), transparent 70%);
  pointer-events: none;
}

.brz #pay .brz-css-xpihs .brz-row--inner > .brz-columns > .brz-bg {
  display: none !important;
}

.brz #pay .brz-css-xpihs .brz-row--inner > .brz-columns > .brz-column__items {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 27px 25px 28px !important;
  box-sizing: border-box;
}

.brz #pay .brz-css-xpihs .brz-column__items > .brz-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}
.brz #pay .brz-css-xpihs .brz-column__items > .brz-wrapper:first-child,
.brz #pay .brz-css-xpihs .brz-column__items > .brz-wrapper:last-child {
  display: none !important;
}

.brz #pay .brz-css-xpihs .brz-column__items > .brz-wrapper:nth-child(2) {
  margin-bottom: 19px !important;
}

.brz #pay .brz-css-xpihs h5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 10px;
  border: 1px solid #e3defa;
  border-radius: 12px;
  background: #f1edff;
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.045em !important;
  line-height: 1 !important;
}
.brz #pay .brz-css-xpihs h5 strong {
  color: #5a49be !important;
}

.brz #pay .brz-css-xpihs .brz-rich-text p,
.brz #pay .brz-css-xpihs .brz-rich-text p span {
  color: #56617e !important;
  font-family: Nunito, Arial, sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 400 !important;
  line-height: 1.58 !important;
  letter-spacing: 0 !important;
  overflow-wrap: break-word;
}
.brz #pay .brz-css-xpihs .brz-rich-text p strong {
  color: #263157 !important;
  font-weight: 800 !important;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .brz #pay .brz-css-xpihs .brz-row--inner > .brz-columns:hover {
    transform: translateY(-4px);
    border-color: #cec5f4 !important;
    box-shadow: 0 22px 46px rgba(55, 47, 132, .13), 0 4px 12px rgba(55, 47, 132, .045) !important;
  }
}

@media (max-width: 991px) {
  .brz #pay .brz-css-xpihs {
    padding-left: 0 !important;
  }
}

@media (max-width: 767px) {
  .brz #pay > .brz-section__content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .brz #pay .brz-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .brz #pay .brz-css-xpihs {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 14px;
  }
  .brz #pay .brz-css-xpihs .brz-row--inner > .brz-columns {
    min-height: 0;
    border-radius: 18px !important;
  }
  .brz #pay .brz-css-xpihs .brz-row--inner > .brz-columns > .brz-column__items {
    height: auto;
    padding: 22px 22px 24px !important;
  }
  .brz #pay .brz-css-xpihs .brz-column__items > .brz-wrapper:nth-child(2) {
    margin-bottom: 16px !important;
  }
  .brz #pay .brz-css-xpihs h5 {
    min-width: 45px;
    min-height: 42px;
    font-size: 17px !important;
  }
  .brz #pay .brz-css-xpihs .brz-rich-text p,
  .brz #pay .brz-css-xpihs .brz-rich-text p span {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .brz #pay .brz-css-xpihs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 16px;
  }
  .brz #pay .brz-css-xpihs .brz-row--inner > .brz-columns {
    min-height: 210px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brz #pay .brz-css-xpihs .brz-row--inner > .brz-columns {
    transition: none !important;
  }
  .brz #pay .brz-css-xpihs .brz-row--inner > .brz-columns:hover {
    transform: none !important;
  }
}

/* Standalone draft for #garanty and #friends only; load after refresh.css. */

/* Six guarantee cards: expose a real gutter between the Brizy columns. */
.brz #garanty .brz-row--inner {
  column-gap: 18px;
}

.brz #garanty .brz-css-mghlx > .brz-row__container + .brz-row__container {
  margin-top: 18px;
}

.brz #garanty .brz-row--inner > .brz-columns {
  position: relative;
  flex: 1 1 calc(50% - 9px) !important;
  max-width: calc(50% - 9px) !important;
  margin: 0 !important;
  border: 1px solid #e5e9f5 !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 14px 38px rgba(28, 37, 84, .08) !important;
  overflow: hidden;
}

.brz #garanty .brz-row--inner > .brz-columns::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #6956dc, #8d7df1);
  opacity: .9;
  pointer-events: none;
}

.brz #garanty .brz-row--inner > .brz-columns > .brz-column__items {
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  padding: 28px 24px 30px !important;
}

.brz #garanty .brz-row--inner > .brz-columns > .brz-column__items > .brz-css-jwvra {
  display: none !important;
}

.brz #garanty .brz-row--inner > .brz-columns > .brz-column__items > .brz-wrapper-clone {
  margin: 0 0 14px !important;
}

.brz #garanty .brz-row--inner > .brz-columns > .brz-column__items > .brz-wrapper {
  margin: 0 !important;
}

.brz #garanty .brz-row--inner > .brz-columns > .brz-column__items > .brz-wrapper:has(h5) {
  margin-bottom: 12px !important;
}

/* Three friend benefits: aligned card tops, equal heights, and aligned CTAs. */
.brz #friends .brz-row__container > .brz-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.brz #friends .brz-row__container > .brz-row > .brz-columns {
  position: relative;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  border: 1px solid #e5e9f5;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(28, 37, 84, .08);
  overflow: hidden;
}

.brz #friends .brz-row__container > .brz-row > .brz-columns::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #6956dc, #8d7df1);
  opacity: .9;
  pointer-events: none;
}

.brz #friends .brz-row__container > .brz-row > .brz-columns > .brz-column__items {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 32px 28px 30px !important;
}

.brz #friends .brz-column__items > .brz-css-jwvra {
  display: none !important;
}

.brz #friends .brz-column__items > .brz-wrapper-clone:first-child {
  margin: 0 0 18px !important;
}

.brz #friends .brz-column__items > .brz-wrapper {
  margin: 0 0 14px !important;
}

.brz #friends .brz-column__items > .brz-wrapper-clone:last-child {
  margin: auto 0 0 !important;
  padding-top: 20px;
}

@media (max-width: 991px) {
  .brz #garanty .brz-row--inner { column-gap: 14px; }
  .brz #garanty .brz-css-mghlx > .brz-row__container + .brz-row__container { margin-top: 14px; }
  .brz #garanty .brz-row--inner > .brz-columns {
    flex-basis: calc(50% - 7px) !important;
    max-width: calc(50% - 7px) !important;
  }
  .brz #friends .brz-row__container > .brz-row { gap: 14px; }
  .brz #friends .brz-row__container > .brz-row > .brz-columns > .brz-column__items {
    padding: 26px 20px 24px !important;
  }
}

@media (max-width: 767px) {
  .brz #garanty .brz-row--inner { row-gap: 14px; }
  .brz #garanty .brz-row--inner > .brz-columns {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .brz #garanty .brz-row--inner > .brz-columns > .brz-column__items {
    padding: 26px 22px 28px !important;
  }
  .brz #friends .brz-row__container > .brz-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .brz #friends .brz-row__container > .brz-row > .brz-columns > .brz-column__items {
    padding: 28px 22px 26px !important;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .brz #garanty .brz-row--inner > .brz-columns:hover,
  .brz #friends .brz-row__container > .brz-row > .brz-columns:hover {
    box-shadow: 0 24px 50px rgba(44, 39, 115, .13) !important;
  }
}

@media (min-width: 992px) and (max-width: 1240px) {
  .brz #pay .brz-container {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

@media (max-width: 359px) {
  .brz #friends .brz-css-oflji {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}