@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700;800&display=swap");

:root {
  --jm-checkout-accent: #fd7f20;
  --jm-checkout-accent-strong: #ff8b33;
  --jm-checkout-surface: rgba(0, 0, 0, 0.7);
  --jm-checkout-surface-soft: rgba(0, 0, 0, 0.45);
  --jm-checkout-border: #747474;
  --jm-checkout-text: #ffffff;
  --jm-checkout-muted: #d7d7d7;
  --jm-checkout-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  --jm-checkout-background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.88)),
    url("https://merchstore.jocosemedia.com/img/Website%20Backdrop.png") center top / cover no-repeat fixed;
}

body#app-checkout {
  margin: 0 !important;
  min-height: 100dvh !important;
  padding: 1.5rem !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr) !important;
  gap: 1.5rem !important;
  align-items: start !important;
  background: var(--jm-checkout-background) !important;
  color: var(--jm-checkout-text) !important;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif !important;
}

body#app-checkout > div:first-of-type,
body#app-checkout > div:has(aside) {
  min-width: 0 !important;
}

body#app-checkout > div:first-of-type {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

body#app-checkout a {
  color: var(--jm-checkout-accent) !important;
  text-decoration: none !important;
}

body#app-checkout a:hover {
  color: var(--jm-checkout-accent-strong) !important;
  text-decoration: underline !important;
}

header:has([data-testid="ShopLogo.Image"]) {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

header:has([data-testid="ShopLogo.Image"]) > div {
  display: flex !important;
  align-items: center !important;
  min-height: 4.35rem !important;
  padding: 0.8rem 1.5rem !important;
  border: 1px solid var(--jm-checkout-border) !important;
  border-radius: 2rem !important;
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: var(--jm-checkout-shadow) !important;
}

[data-testid="ShopLogo.Image"] {
  display: block !important;
  width: clamp(5rem, 8vw, 7rem) !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 0.75rem rgba(253, 127, 32, 0.18)) !important;
}

main#main,
body#app-checkout aside,
main#main + div {
  border: 1px solid var(--jm-checkout-border) !important;
  border-radius: 2rem !important;
  background: var(--jm-checkout-surface) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: var(--jm-checkout-shadow) !important;
}

main#main {
  padding: 1.25rem !important;
}

main#main > div {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

main#main form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

main#main form > div:first-child,
main#main form > div:last-child > div {
  padding: 1rem !important;
  border: 1px solid rgba(116, 116, 116, 0.55) !important;
  border-radius: 1.5rem !important;
  background: var(--jm-checkout-surface-soft) !important;
}

main#main fieldset {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

main#main legend[data-testid="Heading"],
body#app-checkout aside [data-testid="BreakdownRow.Total"] > div:first-child {
  margin: 0 0 0.75rem !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: clamp(1.45rem, 1rem + 1vw, 2rem) !important;
  letter-spacing: 0.05em !important;
  color: var(--jm-checkout-accent) !important;
  text-transform: uppercase !important;
}

main#main p,
main#main span,
main#main label,
main#main div,
body#app-checkout aside div,
main#main + div div {
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif !important;
}

label[data-testid="Checkbox"] {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  color: var(--jm-checkout-muted) !important;
}

label[data-testid="Checkbox"] input {
  accent-color: var(--jm-checkout-accent) !important;
}

#stripe-element,
#stripe-link-authentication-element,
#stripe-shipping-address-element,
#stripe-billing-address-element,
.StripeElement {
  border-radius: 1.25rem !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

#stripe-element,
#stripe-link-authentication-element,
#stripe-shipping-address-element,
#stripe-billing-address-element {
  border: 1px solid rgba(116, 116, 116, 0.55) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
}

#stripe-element iframe,
#stripe-link-authentication-element iframe,
#stripe-shipping-address-element iframe,
#stripe-billing-address-element iframe {
  border-radius: 1.25rem !important;
}

button[data-testid="button"] {
  width: 100% !important;
  min-height: 3.5rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ff973f, #fd7f20) !important;
  color: #000000 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: 0 14px 28px rgba(253, 127, 32, 0.28) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

button[data-testid="button"]:hover,
button[data-testid="button"]:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 32px rgba(253, 127, 32, 0.38) !important;
}

button[data-testid="ButtonClean"] {
  min-height: 2.8rem !important;
  padding: 0.55rem 1rem !important;
  border: 1px solid rgba(253, 127, 32, 0.65) !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: var(--jm-checkout-accent) !important;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
}

button[data-testid="ButtonClean"]:hover,
button[data-testid="ButtonClean"]:focus-visible {
  background: rgba(253, 127, 32, 0.15) !important;
  color: #ffffff !important;
}

main#main .sc-jaWAjX {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
}

main#main .sc-etVRix,
main#main .sc-dRZyXS {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

main#main + div {
  padding: 1rem 1.25rem !important;
  color: var(--jm-checkout-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
}

body#app-checkout > div:has(aside) {
  position: sticky !important;
  top: 1.5rem !important;
}

body#app-checkout aside {
  padding: 1.25rem !important;
}

body#app-checkout aside img {
  border-radius: 1.25rem !important;
}

[data-testid="PurchaseSummary.Product"] {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 0.9rem !important;
  align-items: center !important;
  padding: 0.9rem !important;
  border: 1px solid rgba(116, 116, 116, 0.55) !important;
  border-radius: 1.5rem !important;
  background: var(--jm-checkout-surface-soft) !important;
}

[data-testid="PurchaseSummary.Product"] > div:first-child {
  position: relative !important;
}

[data-testid="PurchaseSummary.Product"] > div:first-child > div {
  border: 1px solid rgba(0, 0, 0, 0.75) !important;
  background: var(--jm-checkout-accent) !important;
  color: #000000 !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.65) !important;
}

[data-testid="BreakdownRow.Subtotal"],
[data-testid="BreakdownRow.Total"] {
  color: var(--jm-checkout-text) !important;
}

[data-testid="BreakdownRow.Total"] {
  font-weight: 800 !important;
}

[data-testid="BreakdownRow.Total"] .sc-cbJLzd {
  color: var(--jm-checkout-accent) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

.sc-eEehcn button {
  width: 100% !important;
  min-height: 3rem !important;
  border: 1px dashed rgba(253, 127, 32, 0.55) !important;
  border-radius: 1.5rem !important;
  background: rgba(0, 0, 0, 0.28) !important;
  color: var(--jm-checkout-accent) !important;
  font-weight: 700 !important;
}

.sc-eEehcn button:hover,
.sc-eEehcn button:focus-visible {
  background: rgba(253, 127, 32, 0.14) !important;
  color: #ffffff !important;
}

#paypal-button-container {
  min-height: 2.75rem !important;
}

@media (max-width: 1100px) {
  body#app-checkout {
    grid-template-columns: 1fr !important;
    padding: 1rem !important;
  }

  body#app-checkout > div:has(aside) {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 700px) {
  body#app-checkout {
    gap: 1rem !important;
  }

  main#main,
  body#app-checkout aside,
  main#main + div,
  header:has([data-testid="ShopLogo.Image"]) > div {
    border-radius: 1.5rem !important;
  }

  main#main {
    padding: 1rem !important;
  }

  main#main form > div:first-child,
  main#main form > div:last-child > div,
  [data-testid="PurchaseSummary.Product"] {
    padding: 0.85rem !important;
    border-radius: 1.25rem !important;
  }
}