/* Half tiles at top - side by side */
[aria-label="Group: Homepage"] > section:first-child .r-1w6e6rj > div {
  width: 100% !important;
  margin-right: 0 !important;
}

[aria-label="Group: Homepage"] > section:first-child .r-1w6e6rj > div > .r-13awgt0.r-13qz1uu {
  flex-direction: row !important;
  gap: 8px !important;
  aspect-ratio: auto !important;
}

[aria-label="Group: Homepage"] > section:first-child .r-1w6e6rj > div > .r-13awgt0.r-13qz1uu > div {
  flex: 1 !important;
  margin-top: 0 !important;
}

[aria-label="Group: Homepage"] > section:first-child .r-1w6e6rj > div > .r-13awgt0.r-13qz1uu > div > .r-13awgt0 {
  aspect-ratio: 2 / 1 !important;
}

/* Centre text in both half tiles */
[aria-label="Group: Homepage"] > section:first-child .r-13awgt0.r-13qz1uu > div article,
[aria-label="Group: Homepage"] > section:first-child .r-13awgt0.r-13qz1uu > div article *,
[aria-label="Group: Homepage"] > section:first-child .r-13awgt0.r-13qz1uu > div article div {
  text-align: center !important;
  align-self: center !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Name tile - vertical centre fix and font size */
[aria-label="Group: Homepage"] > section:first-child .r-13awgt0.r-13qz1uu > div:first-child article[aria-label*="Hi,"] > div {
  padding: 8px !important;
}

[aria-label="Group: Homepage"] > section:first-child .r-13awgt0.r-13qz1uu > div:first-child article[aria-label*="Hi,"] h1 {
  font-size: 20px !important;
}

/* Points tile - "You have" font size */
[aria-label="Group: Homepage"] > section:first-child .r-13awgt0.r-13qz1uu > div:nth-child(2) article .css-146c3p1 {
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* Reduce gap when CTA banner is absent */
[aria-label="Group: Homepage"]:not(:has([data-testid="banner-tile"][aria-label="Scan & Earn Points"])) > section:first-child {
  margin-bottom: 8px !important;
}

@media (min-width: 768px) {
  [aria-label="Group: Homepage"] > section:first-child .r-1w6e6rj > div {
    width: calc(50% - 8px) !important;
  }

  [aria-label="Group: Homepage"] > section:first-child .r-1w6e6rj {
    justify-content: center !important;
  }

  [aria-label="Group: Homepage"] > section:has([data-testid="banner-tile"][aria-label="Scan & Earn Points"]) {
    max-width: calc(50% - 8px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* CTA banner - horizontal layout */
[aria-label="Group: Homepage"] > section:has([data-testid="banner-tile"][aria-label="Scan & Earn Points"]) {
  margin-top: -46px !important;
  padding-top: 0 !important;
}

[data-testid="banner-tile"][aria-label="Scan & Earn Points"] {
  min-height: 60px !important;
  padding: 12px !important;
}

[data-testid="banner-tile"][aria-label="Scan & Earn Points"] > div {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

[data-testid="banner-tile"][aria-label="Scan & Earn Points"] > div h1 {
  margin-bottom: 0 !important;
}

/* Horizontal scrolling grids - mobile only */
@media (max-width: 767px) {
  [data-testid="group-container"] [role="region"]:not(:first-of-type) .r-1w6e6rj {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
  }

  [data-testid="group-container"] [role="region"]:not(:first-of-type) .r-1w6e6rj::-webkit-scrollbar {
    display: none;
  }

  [data-testid="group-container"] [role="region"]:not(:first-of-type) .r-1w6e6rj > div {
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
}

/* Standard grid on desktop - safety net to revert any scroll behaviour */
@media (min-width: 768px) {
  [data-testid="group-container"] [role="region"]:not(:first-of-type) .r-1w6e6rj {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    padding-right: 0 !important;
  }

  [data-testid="group-container"] [role="region"]:not(:first-of-type) .r-1w6e6rj > div {
    flex-shrink: 1 !important;
  }
}

/* Modal text colour */
div[class*="css-"]:has(> h1):has(> span):has(> div > button) {
  color: #100687 !important;
}

div[class*="css-"]:has(> h1):has(> span):has(> div > button) h1,
div[class*="css-"]:has(> h1):has(> span):has(> div > button) span {
  color: #100687 !important;
}

/* Breadcrumb reward name - white */
.css-1jb5omm,
.css-1jb5omm span {
  color: #FFFFFF !important;
}

/* Explore more rewards button */
a.css-1u0139p {
  background-color: #038fcc !important;
  color: #FFFFFF !important;
}

/* Form field colours */
input.css-1hbavqk {
  color: #000000 !important;
}

input.css-1hbavqk::placeholder {
  color: #c3c3c3 !important;
}

.css-ve33ef {
  color: #000000 !important;
}

.css-6l8hz3 {
  color: #000000 !important;
}