/* Geschenk-Spielzeit: emotionale Variante der gemeinsamen Spielzeit-Komponenten. */

.account-gift-purchase-page,
.account-gift-checkout-page {
  --gift-red: #a9362b;
  --gift-red-dark: #7f251e;
  --gift-cream: #fff8e4;
}

.gift-hero {
  background:
    radial-gradient(circle at 14% 12%, rgb(255 222 129 / 20%), transparent 34%),
    radial-gradient(circle at 92% 96%, rgb(205 63 44 / 18%), transparent 33%),
    linear-gradient(135deg, #073c25 0%, #075f31 55%, #06442a 100%);
}

.gift-card {
  position: relative;
  z-index: 1;
  width: min(100%, 355px);
  min-height: 365px;
  justify-self: center;
  padding: 92px 32px 32px;
  overflow: hidden;
  border: 1px solid rgb(255 226 133 / 78%);
  border-radius: 18px;
  color: #173b27;
  background:
    radial-gradient(circle at 50% 0, rgb(255 225 133 / 64%), transparent 38%),
    linear-gradient(150deg, #fffefa, #f8edc8);
  box-shadow: 0 21px 34px rgb(0 25 13 / 36%), inset 0 0 0 5px rgb(221 163 0 / 9%);
  text-align: center;
  transform: rotate(1.2deg);
}

.gift-card__ribbon {
  position: absolute;
  inset: 0 auto 0 47px;
  width: 25px;
  background: linear-gradient(90deg, #7e1f19, #c94b3e 48%, #8a241c);
  box-shadow: 2px 0 7px rgb(92 27 20 / 23%);
}

.gift-card__bow {
  position: absolute;
  top: 28px;
  left: 59px;
  width: 68px;
  height: 52px;
  transform: translateX(-50%);
}

.gift-card__bow::after {
  position: absolute;
  width: 27px;
  height: 27px;
  top: 12px;
  left: 21px;
  border-radius: 50%;
  background: linear-gradient(145deg, #dd5a4b, #8d251d);
  box-shadow: 0 3px 6px rgb(73 21 17 / 28%);
  content: "";
}

.gift-card__bow i {
  position: absolute;
  width: 38px;
  height: 31px;
  top: 8px;
  border: 8px solid #ad352b;
  border-radius: 62% 46% 58% 45%;
}

.gift-card__bow i:first-child {
  left: -7px;
  transform: rotate(20deg);
}

.gift-card__bow i:last-child {
  right: -7px;
  transform: rotate(-20deg) scaleX(-1);
}

.gift-card__seal {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  margin: 0 auto 20px;
  border: 2px solid #b37b08;
  border-radius: 50%;
  color: #805606;
  background: linear-gradient(145deg, #ffe99a, #dca20b);
  box-shadow: 0 5px 13px rgb(77 53 5 / 25%), inset 0 1px rgb(255 255 255 / 70%);
  font-family: var(--font-display);
  font-weight: 900;
}

.gift-card > p {
  margin: 0 0 8px;
  color: #875f0e;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.gift-card > strong {
  display: block;
  color: var(--green-950);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
}

.gift-card > small {
  display: block;
  max-width: 220px;
  margin: 23px auto 0;
  color: #667063;
  line-height: 1.55;
}

.gift-story {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--purchase-border);
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, var(--gift-cream));
  box-shadow: 0 7px 20px rgb(38 51 35 / 9%);
}

.gift-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.gift-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 21px;
  border: 1px solid #e2d7b8;
  border-radius: 12px;
  background: rgb(255 255 255 / 78%);
}

.gift-steps li > span,
.gift-confirmation-steps li > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #c49014, #8c6108);
  box-shadow: 0 4px 10px rgb(84 56 8 / 19%);
  font-weight: 900;
}

.gift-steps h3 {
  margin: 1px 0 8px;
  color: var(--green-950);
  font-size: 1.02rem;
}

.gift-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.gift-benefits {
  padding: clamp(27px, 4vw, 42px);
  border: 1px solid var(--purchase-border);
  border-radius: 15px;
  background: rgb(255 255 255 / 86%);
  box-shadow: 0 7px 20px rgb(38 51 35 / 9%);
}

.gift-plan-grid {
  max-width: 760px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: auto;
}

.gift-plan--year .purchase-plan__surface::after {
  position: absolute;
  width: 90px;
  height: 90px;
  right: -47px;
  bottom: -48px;
  border: 1px solid rgb(169 54 43 / 18%);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgb(169 54 43 / 4%);
  content: "";
}

.gift-checkout-hero {
  border-color: rgb(169 54 43 / 25%);
  background:
    radial-gradient(circle at 92% 10%, rgb(201 75 62 / 11%), transparent 28%),
    linear-gradient(135deg, #fffdf7, #fff7df);
}

.gift-checkout-grid {
  align-items: start;
}

.gift-confirmation-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gift-confirmation-steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid #e5ddc8;
  border-radius: 10px;
  background: #fffdf8;
}

.gift-confirmation-steps li > span {
  width: 38px;
  height: 38px;
}

.gift-confirmation-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.gift-confirmation-steps strong {
  display: block;
  color: var(--green-950);
}

.gift-legal-notes {
  margin-top: 20px;
  padding: 18px 20px;
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: #fff9e8;
}

.gift-legal-notes h3 {
  margin: 0 0 10px;
  color: var(--green-950);
}

.gift-legal-notes ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.5;
}

.gift-checkout-consent {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 13px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #d8d1bd;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  line-height: 1.55;
}

.gift-checkout-consent input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--green-700);
}

.gift-checkout-consent a {
  color: var(--green-800);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gift-checkout-summary .gift-submit,
.gift-checkout-summary .gift-change-package {
  width: calc(100% - 32px);
  margin: 0 16px 14px;
}

.gift-checkout-summary .gift-submit {
  min-height: 54px;
  border: 0;
}

@media (max-width: 980px) {
  .gift-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .gift-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .gift-card {
    width: min(90%, 330px);
    min-height: 330px;
    padding-top: 78px;
  }

  .gift-plan-grid {
    grid-template-columns: 1fr;
  }

  .gift-steps li {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 17px;
  }
}

@media (forced-colors: active) {
  .gift-card__ribbon,
  .gift-card__bow,
  .gift-card__seal {
    forced-color-adjust: auto;
  }
}