/* ==========================================================================
 * ALVIRAN Shop - custom request CTA and lower page rhythm
 * ========================================================================== */

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom {
  margin: 34px 0 0 !important;
  border-radius: 14px !important;
  border-color: rgba(255, 255, 255, .08) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cta-game-color, var(--shop-page-game-color, #e4c66d)) 7%, transparent), transparent 58%),
    rgba(9, 11, 16, .76) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-inner {
  grid-template-columns: minmax(0, 1fr) minmax(270px, 316px) !important;
  gap: 32px !important;
  align-items: center !important;
  padding: 24px 26px !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-left {
  max-width: 820px !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-title {
  max-width: 760px !important;
  font-size: clamp(1.16rem, 1.48vw, 1.34rem) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-sub {
  max-width: 760px !important;
  color: rgba(255, 248, 234, .58) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-pills {
  gap: 16px !important;
  margin-top: 16px !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-pills span {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255, 248, 234, .58) !important;
  font-size: .7rem !important;
  font-weight: 720 !important;
  white-space: nowrap !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-pills span::before {
  content: "" !important;
  position: static !important;
  flex: 0 0 auto !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #22d39a !important;
  box-shadow: 0 0 0 4px rgba(34, 211, 154, .11) !important;
  transform: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 11px !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .026) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-right::before {
  content: "Custom match" !important;
  color: color-mix(in srgb, var(--cta-game-color, var(--shop-page-game-color, #e4c66d)) 62%, rgba(255, 255, 255, .78)) !important;
  font-size: .66rem !important;
  font-weight: 820 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-preview {
  display: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  border-radius: 10px !important;
  font-size: .8rem !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-note {
  display: block !important;
  margin: 0 !important;
  color: rgba(255, 248, 234, .48) !important;
  font-size: .68rem !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-standard-container {
  margin-top: 94px !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-standard {
  border-color: rgba(255, 255, 255, .065) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .028), transparent 38%),
    rgba(8, 10, 15, .68) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-seo {
  margin-top: 140px !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-seo-panel {
  border-color: rgba(255, 255, 255, .055) !important;
  background: rgba(8, 10, 15, .48) !important;
  box-shadow: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-faq {
  margin-top: 78px !important;
  padding-top: 32px !important;
  border-top-color: rgba(255, 255, 255, .06) !important;
}

@media (max-width: 1080px) {
  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-right {
    max-width: 420px !important;
  }
}

@media (max-width: 720px) {
  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom {
    margin-top: 28px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-inner {
    padding: 20px 18px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-pills {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-pills span {
    width: 100% !important;
    white-space: normal !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-cta-bottom-right {
    max-width: none !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-standard-container {
    margin-top: 70px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-seo {
    margin-top: 96px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) .alv-shop-faq {
    margin-top: 56px !important;
    padding-top: 26px !important;
  }
}