/* Invitation Card — wstrzykiwana w hero homepage_gr przez hero_invitation_slot_template.
   Wymaga: redesign-base.css, redesign-components.css (.btn, .btn--primary, .btn--outline, .btn--small) */

.invitation-card {
  width: min(100%, 1040px);
  border: 4px solid #f8f9fb; /* $color-seasalt */
  border-radius: 18px;
  padding: 24px 44px 22px;
  text-align: center;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: column nowrap;
  gap: 12px;
}

.invitation-card h2 {
  margin: 0;
  color: #22252a; /* $color-night */
  font-family: 'Parkinsans', Helvetica Neue, Arial; /* $font-secondary */
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 28.8px;
}

.invitation-card h2 strong {
  color: #e40148; /* $color-primary */
  font-weight: 600; /* $font-w-semibold */
}

.invitation-org-box {
  width: min(100%, 720px);
  margin: 8px 0;
  border-radius: 12px;
  padding: 12px 18px;
  background-color: #f4faff;
}

.invitation-org-box__name,
.invitation-org-box__parent,
.invitation-org-box__description {
  margin: 0;
  color: #22252a;
  font-family: 'DMSans', Helvetica Neue, Arial;
}

.invitation-org-box__name {
  font-family: 'Parkinsans', Helvetica Neue, Arial;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
}

.invitation-org-box__parent {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
}

.invitation-org-box__description {
  max-width: 720px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
}

.invitation-org-box__description strong {
  color: #e40148;
  font-weight: 700;
}

.invitation-card__actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  gap: 12px;
}

/* ─── Mobile (≤991px = screen-sm-minus) ────────────────────────────────────── */
@media only screen and (max-width: 991px) {
  .invitation-card {
    width: calc(100% - 32px);
    margin-inline: 16px;
    border-radius: 16px;
    padding: 22px 16px;
  }
}

.invitation-page .invitation-sections {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 64px;
}

.invitation-page .hero-section__description--stats {
  display: block;
}

.invitation-page .invitation-shops {
  gap: 0;
  padding: 0 24px;
}

.invitation-page .invitation-shops .shops-section__heading {
  margin: 0 0 20px;
}

.invitation-page .invitation-shops .shops-section__nav {
  margin: 0;
}

.invitation-page .invitation-shops__grid {
  display: flex;
  flex-flow: row nowrap;
  gap: 24px;
  width: 384px;
  max-width: 100%;
  margin: 10px auto 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.invitation-page .invitation-shops__grid::-webkit-scrollbar {
  display: none;
}

.invitation-page .invitation-shops__grid .shop-tile {
  flex: 0 0 384px;
  max-width: 100%;
  scroll-snap-align: start;
}

.invitation-page .apps-section {
  padding-top: 72px;
}

.invitation-page .apps-section__browsers-label {
  display: none;
}

@media only screen and (min-width: 840px) {
  .invitation-page .invitation-shops__grid {
    width: 792px;
  }
}

@media only screen and (min-width: 1248px) {
  .invitation-page .invitation-shops__grid {
    width: 1200px;
  }
}

@media only screen and (max-width: 991px) {
  .invitation-page .invitation-shops .shops-section__nav {
    margin-top: 16px;
  }
}

.invitation-page .invitation-signup {
  width: min(100%, 1040px);
  border: 4px solid #f8f9fb;
  border-radius: 18px;
  padding: 48px 44px;
  text-align: center;
  scroll-margin-top: 96px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: column nowrap;
  gap: 20px;
}

.invitation-page .invitation-signup__heading {
  margin: 0;
  color: #22252a;
  font-family: 'Parkinsans', 'Helvetica Neue', Arial;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 33.6px;
}

.invitation-page .invitation-signup__heading strong {
  color: #e40148;
  font-weight: 600;
}

.invitation-page .invitation-signup__form {
  width: 100%;
  max-width: 400px;
  margin: 8px auto 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 24px;
  text-align: left;
}

.invitation-page .signup-crispy-wrap {
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: 24px;
}

.invitation-page .signup-crispy-wrap .row {
  display: flex;
  flex-flow: column;
  margin: 0;
  width: 100%;
}

.invitation-page .signup-crispy-wrap [class*="col-"] {
  flex: 1 1 100%;
  max-width: 100%;
  padding: 0;
}

.invitation-page .signup-crispy-wrap .form-group,
.invitation-page .signup-crispy-wrap .mb-3 {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: 0;
}

.invitation-page .signup-crispy-wrap label,
.invitation-page .signup-crispy-wrap .form-label,
.invitation-page .signup-crispy-wrap .control-label {
  margin: 0 0 4px 0;
  padding: 0;
  color: #22252a;
  font-family: 'DMSans', 'Helvetica Neue', Arial;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  text-align: left;
}

.invitation-page .signup-crispy-wrap label.requiredField .asteriskField {
  color: #e40148;
  margin-left: 2px;
}

.invitation-page .signup-crispy-wrap input[type="text"],
.invitation-page .signup-crispy-wrap input[type="email"],
.invitation-page .signup-crispy-wrap input[type="password"],
.invitation-page .signup-crispy-wrap .form-control,
.invitation-page .signup-crispy-wrap .textinput {
  width: 100%;
  height: 40px;
  background-color: #ffffff;
  padding: 0 16px;
  color: #020408;
  border: 1px solid #dfe1e6;
  border-radius: 20px;
  font-family: 'DMSans', 'Helvetica Neue', Arial;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  box-sizing: border-box;
  outline: none;
  box-shadow: none;
}

.invitation-page .signup-crispy-wrap input::placeholder,
.invitation-page .signup-crispy-wrap .form-control::placeholder {
  color: #9096a3;
}

.invitation-page .signup-crispy-wrap input:focus,
.invitation-page .signup-crispy-wrap .form-control:focus {
  border-color: #9096a3;
  outline: none;
  box-shadow: none;
}

.invitation-page .signup-crispy-wrap .is-invalid,
.invitation-page .signup-crispy-wrap input[aria-invalid="true"] {
  border-color: #e40148 !important;
  background-image: none !important;
  padding-right: 16px !important;
}

.invitation-page .signup-crispy-wrap .errorlist,
.invitation-page .signup-crispy-wrap .invalid-feedback,
.invitation-page .signup-crispy-wrap .text-danger {
  display: block;
  list-style: none;
  margin: 2px 0 0 0;
  padding: 0;
  color: #e40148;
  font-family: 'DMSans', 'Helvetica Neue', Arial;
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
}

.invitation-page .signup-crispy-wrap .errorlist li {
  margin: 0;
  padding: 0;
}

.invitation-page .signup-crispy-wrap .form-text,
.invitation-page .signup-crispy-wrap .helptext {
  margin: 4px 0 0 0;
  color: #9096a3;
  font-family: 'DMSans', 'Helvetica Neue', Arial;
  font-size: 12px;
  line-height: 16.8px;
}

.invitation-page .signup-crispy-wrap input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 8px 0 0;
  cursor: pointer;
  accent-color: #22252a;
  flex-shrink: 0;
}

.invitation-page .signup-crispy-wrap .form-check,
.invitation-page .signup-crispy-wrap .checkbox {
  width: 100%;
  margin: 4px 0;
  padding: 0;
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  gap: 0;
}

.invitation-page .signup-crispy-wrap .form-check-label,
.invitation-page .signup-crispy-wrap .form-check label,
.invitation-page .signup-crispy-wrap .checkbox label {
  display: inline;
  margin: 0;
  color: #22252a;
  font-family: 'DMSans', 'Helvetica Neue', Arial;
  font-size: 14px;
  line-height: 19.6px;
  cursor: pointer;
}

.invitation-page .signup-crispy-wrap .form-check-label a,
.invitation-page .signup-crispy-wrap .form-check label a,
.invitation-page .signup-crispy-wrap .checkbox label a {
  color: #22252a;
  font-weight: 500;
  text-decoration: underline;
}

.invitation-page .signup-crispy-wrap .form-check-label a:hover,
.invitation-page .signup-crispy-wrap .checkbox label a:hover {
  color: #e40148;
}

.invitation-page .signup-crispy-wrap p {
  color: #22252a;
  font-family: 'DMSans', 'Helvetica Neue', Arial;
  font-size: 14px;
  line-height: 19.6px;
  margin: 4px 0;
}

.invitation-page .invitation-signup__submit {
  width: auto;
  align-self: center;
  min-width: 200px;
  border: 1px solid #e40148;
  outline: none;
  white-space: nowrap;
  padding: 0 32px;
  height: 40px;
  border-radius: 20px;
  text-transform: uppercase;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
  font-family: 'DMSans', 'Helvetica Neue', Arial;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 700;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  background-color: #e40148;
  box-sizing: border-box;
}

.invitation-page .invitation-signup__submit:hover:not([disabled]) {
  background-color: #c10039;
  border-color: #c10039;
}

.invitation-page .invitation-social {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.invitation-page .invitation-social__label {
  color: #9096a3;
  font-family: 'DMSans', 'Helvetica Neue', Arial;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
}

.invitation-page .invitation-social__buttons {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.invitation-page .invitation-social__btn {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: 1px solid #dfe1e6;
  background: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
}

.invitation-page .invitation-social__btn:hover:not([disabled]) {
  background-color: #f8f9fb;
}

.invitation-page .invitation-social__btn img {
  width: 24px;
  height: 24px;
}

.invitation-page .invitation-social__btn[aria-label="Apple"] img {
  filter: brightness(0);
}

.invitation-page .invitation-registered {
  width: min(100%, 960px);
  margin: 0 auto;
  text-align: center;
  scroll-margin-top: 96px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 26px;
}

.invitation-page .invitation-registered__title {
  max-width: 760px;
  margin: 0;
  color: #22252a;
  font-family: 'Parkinsans', 'Helvetica Neue', Arial;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
}

.invitation-page .invitation-registered__note,
.invitation-page .invitation-registered__description {
  max-width: 720px;
  margin: 0;
  color: #22252a;
  font-family: 'DMSans', 'Helvetica Neue', Arial;
  line-height: 1.4;
}

.invitation-page .invitation-registered__note {
  font-size: 18px;
  font-weight: 700;
}

.invitation-page .invitation-registered__description {
  font-size: 18px;
  font-weight: 400;
}

.invitation-page .invitation-registered__description strong {
  color: #e40148;
  font-weight: 700;
}

.invitation-page .invitation-registered__share {
  margin-top: 6px;
  min-width: 0;
  border: 1px solid #e40148;
  outline: none;
  white-space: nowrap;
  padding: 0 28px;
  height: 48px;
  border-radius: 24px;
  text-transform: uppercase;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
  font-family: 'DMSans', 'Helvetica Neue', Arial;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 700;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  background-color: #e40148;
  box-sizing: border-box;
}

.invitation-page .invitation-registered__share:hover:not([disabled]) {
  background-color: #c10039;
  border-color: #c10039;
}

.invitation-page .invitation-registered__share img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.invitation-page .how-it-works-faq {
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: column nowrap;
  gap: 32px;
}

.invitation-page .how-it-works-faq__heading {
  font-family: 'Parkinsans', 'Helvetica Neue', Arial;
  color: #22252a;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 33.6px;
}

.invitation-page .accordion {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-flow: column nowrap;
  gap: 0;
}

.invitation-page .accordion__item {
  width: 100%;
  border-bottom: 1px solid #dfe1e6;
}

.invitation-page .accordion__item:last-child {
  border-bottom: none;
}

.invitation-page .accordion__header {
  width: 100%;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row nowrap;
  gap: 16px;
}

.invitation-page .accordion__header:hover {
  opacity: 0.8;
}

.invitation-page .accordion__title {
  font-family: 'Parkinsans', 'Helvetica Neue', Arial;
  color: #22252a;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.4px;
}

.invitation-page .accordion__icon {
  flex-shrink: 0;
}

.invitation-page .accordion__icon--minus {
  display: none;
}

.invitation-page .accordion__header[aria-expanded="true"] .accordion__icon--plus {
  display: none;
}

.invitation-page .accordion__header[aria-expanded="true"] .accordion__icon--minus {
  display: block;
}

.invitation-page .accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out;
}

.invitation-page .accordion__header[aria-expanded="true"] + .accordion__body {
  grid-template-rows: 1fr;
}

.invitation-page .accordion__body-inner {
  overflow: hidden;
}

.invitation-page .accordion__body-inner p {
  font-family: 'DMSans', 'Helvetica Neue', Arial;
  color: #22252a;
  max-width: 995px;
  padding-bottom: 24px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.6px;
}

.invitation-page .how-it-works-faq .btn {
  box-sizing: border-box;
}

@media only screen and (max-width: 991px) {
  .invitation-page .invitation-sections {
    padding: 40px 16px 64px;
    gap: 48px;
  }

  .invitation-page .invitation-signup {
    width: calc(100% - 32px);
    margin-inline: 16px;
    border-radius: 16px;
    padding: 32px 16px;
  }

  .invitation-page .invitation-signup__heading {
    font-size: 24px;
    line-height: 28.8px;
  }

  .invitation-page .invitation-registered__title {
    font-size: 28px;
    line-height: 1.2;
  }

  .invitation-page .invitation-registered__note,
  .invitation-page .invitation-registered__description {
    font-size: 16px;
  }

  .invitation-page .how-it-works-faq__heading {
    font-size: 24px;
    line-height: 28.8px;
  }

  .invitation-page .accordion__header {
    padding: 16px 0;
  }

  .invitation-page .accordion__title {
    font-size: 14px;
    line-height: 19.6px;
  }

  .invitation-page .accordion__body-inner p {
    padding-bottom: 16px;
  }
}