/* =========================================================
   Feature section
========================================================= */

.features-section {
  width: min(100%, 720px);
  margin: 0 auto 42px;
}

.feature-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 22px;
}


/* =========================================================
   Feature cards
========================================================= */

.feature-card {
  min-height: 320px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: 28px;

  color: var(--color-text);
  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.96),
      rgba(253, 244, 251, 0.96)
    );

  border: 1px solid var(--color-purple-border);
  border-radius: var(--radius-large);

  text-align: left;

  box-shadow: var(--shadow-card);

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium),
    border-color var(--transition-medium);
}

.feature-card:hover {
  transform: translateY(-5px);

  border-color:
    rgba(150, 87, 191, 0.48);

  box-shadow:
    0 26px 64px rgba(53, 38, 47, 0.16);
}

.feature-card__icon {
  width: 62px;
  height: 62px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 20px;

  color: var(--color-white);
  background:
    linear-gradient(
      135deg,
      var(--color-purple),
      var(--color-purple-dark)
    );

  border-radius: 20px;

  font-size: 1.45rem;

  box-shadow:
    0 12px 24px rgba(89, 52, 108, 0.2);
}

.feature-card__title {
  margin: 0 0 12px;

  color: var(--color-brown);

  font-family: var(--font-brand);
  font-size: 2.85rem;
  font-weight: 400;
  line-height: 0.95;
}

.feature-card__description {
  margin: 0 0 24px;

  color: var(--color-muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

.feature-card--menu .feature-card__icon {
  background:
    linear-gradient(
      135deg,
      #a76a46,
      #744532
    );
}

.feature-card--gallery .feature-card__icon {
  background:
    linear-gradient(
      135deg,
      #d884a5,
      #9d4b72
    );
}

.feature-card--seasonal .feature-card__icon {
  background:
    linear-gradient(
      135deg,
      #b88935,
      #7b5b20
    );
}


/* =========================================================
   Payment card
========================================================= */

.payment-card {
  width: min(100%, 360px);

  margin: 8px auto 0;
  padding: 24px;

  background:
    linear-gradient(
      160deg,
      var(--color-surface),
      var(--color-surface-soft)
    );

  border: 1px solid var(--color-purple-border);
  border-radius: var(--radius-large);

  box-shadow: var(--shadow-card);
}

.payment-qr {
  width: 100%;
  max-width: 280px;
  height: auto;

  margin-inline: auto;

  border-radius: var(--radius-small);
}

.payment-username {
  margin: 17px 0 0;

  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 600;
}


/* =========================================================
   Informational note cards
========================================================= */

.preorder-modal__note,
.preorder-page__note {
  padding: 14px 16px;

  color: var(--color-text);
  background: rgba(150, 87, 191, 0.09);

  border-left: 4px solid var(--color-purple);
  border-radius: var(--radius-small);
}