#postcode-form > div.container > div > div {
    background-color: rgb(249, 210, 45);
    padding-bottom: 40px;
    border-radius: 31px;
}

#kw-shms {
   color: inherit;
}

#postcode-form > div.container > div > div > h2 {
   font-family: 'Montserrat', sans-serif;
}

#postcode-form > div.container > div > div > div.markdown-container.kwc-rt {
   font-family: 'Birdseye', sans-serif;
}

.list-panel {
   background-color: rgb(249, 210, 45);
   border-radius: 50px;
}

#kw-shms{
   font-family: 'Birdseye', sans-serif;
   border: solid 1px #123274;
   border-radius: 50px;
}

#kw-shpg{
   font-family: 'Birdseye', sans-serif;
   border: solid 1px #123274;
   border-radius: 50px;
     color: inherit;
}

#postcode-form > div.container > div > div > div.address-selection-container > div > div.composite-address-input.postcode-composite.kwc-shpc > input {
   font-family: 'Birdseye', sans-serif;
   border-radius: 50px;
}
  
/* Put the panels in a centered row with a controlled gap */
.landing-root {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;            /* change this to adjust spacing */
  flex-wrap: wrap;      /* helps on mobile */
}

/* Neutralize the "left-column" pushing rules */
.home-panel.home-bags,
.home-panel.home-exchange {
  margin: 0 !important;
  left: auto !important;
  float: none !important;
}

/* Optional: stop them being huge 50% columns */
.home-panel.nw50 {
  width: min(520px, 100%) !important;  /* tweak 520px to taste */
}


/* Base button styling (non-hover) */
.home-action a {
  background-color: #000 !important;   /* black */
  color: #fff !important;              /* white text */
  border-radius: 50px !important;
  border: none !important;
  padding: 12px 28px;                  /* adjust if needed */
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Hover state */
.home-action a:hover {
  background-color: #253772 !important; /* blue */
  color: #fff !important;               /* white text */
}

   /* Lower account buttons (My Account / Change Password / Sign Out) */
#logoutForm a,
#logoutForm button {
  background-color: #000 !important;   /* black */
  color: #fff !important;              /* white text */
  border-radius: 50px !important;
  border: none !important;
  padding: 12px 28px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Hover state */
#logoutForm a:hover,
#logoutForm button:hover {
  background-color: #253772 !important; /* blue */
  color: #fff !important;
}

/* Main titles only (Skip / Skip Exchange / Administrator) */
.home-panel .flex-col h1,
.home-panel .flex-col h2,
.home-panel .flex-col h3 {
  color: #ffffff !important;
}

/* Administrator title */
#logoutForm > h3 {
  color: #ffffff !important;
}

/* Primary buttons (Buy Now + Account buttons + kw buttons) */
.home-action a,
#logoutForm a,
#logoutForm button,
#kw-shms,
#kw-shpg {
  background-color: #000 !important;     /* black */
  color: #fff !important;                /* white text */
  border-radius: 50px !important;
  border: none !important;
  padding: 12px 28px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Hover state */
.home-action a:hover,
#logoutForm a:hover,
#logoutForm button:hover,
#kw-shms:hover,
#kw-shpg:hover {
  background-color: #253772 !important;  /* blue */
  color: #fff !important;
}



/* Postcode form main heading only */
#postcode-form > div.container > div > div > h2 {
  color: #ffffff !important;
}


/* Map popup buttons (match main button style) */
#map-popup .map-popup-footer button.btn {
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 50px !important;
  border: none !important;
  padding: 12px 28px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

/* Hover state */
#map-popup .map-popup-footer button.btn:hover {
  background-color: #253772 !important;
  color: #fff !important;
}

/* Disabled / not recognised state (keep greyed out) */
#map-popup .map-popup-footer button.btn:disabled,
#map-popup .map-popup-footer button.btn.disabled,
#map-popup .map-pop

/* Give the popup footer enough room */
#map-popup .map-popup-footer {
  padding-bottom: 24px !important;
}

/* Pull buttons up slightly into the popup */
#map-popup .map-popup-footer button.btn {
  margin-top: -12px !important;
}

/* Make the footer buttons line up and size equally */
#map-popup .map-popup-footer > div {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Both buttons take equal space */
#map-popup .map-popup-footer > div > button.btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box !important;
}

/* Postcode input text colour */
#postcode-form
.composite-address-input.postcode-composite.kwc-shpc
> input {
  color: #253772 !important;     /* original blue */
}

/* Select delivery address text */
#postcode-form
div.address-selection-container
span {
  color: #000 !important;
  transition: color 0.2s ease;
}



/* Address dropdown items – hover to blue */
#postcode-form
.address-selection-container
.address-results
label {
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* Hover state */
#postcode-form
.address-selection-container
.address-results
label:hover {
  color: #253772 !important;
}

/* Address selection checkbox – pill shape + blue border */
#postcode-form
.address-selection-container
input[type="checkbox"] {
  accent-color: #253772;              /* modern browsers */
  border-radius: 50px !important;
}

/* If the checkbox is custom-styled via label/pseudo-element */
#postcode-form
.address-selection-container
label::before {
  border-radius: 50px !important;
  border: 2px solid #253772 !important;
}

#postcode-form
.address-selection-container
input[type="checkbox"]:checked {
  accent-color: #253772;
}

#postcode-form
.address-selection-container
label::after {
  color: #253772 !important;
}

/* Next button – match primary button style */
#postcode-form
.address-selection-container
> button {
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 50px !important;
  border: none !important;
  padding: 12px 28px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Hover state */
#postcode-form
.address-selection-container
> button:hover {
  background-color: #253772 !important;
  color: #fff !important;
}

/* Waste form action buttons – match primary button style */
#waste-form button {
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 50px !important;
  border: none !important;
  padding: 12px 28px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Hover state */
#waste-form button:hover {
  backgro

/* GO buttons – outer shell (correct ID pattern: kw-shc-1..7) */
#kw-shc-1, #kw-shc-2, #kw-shc-3, #kw-shc-4, #kw-shc-5, #kw-shc-6, #kw-shc-7 {
  background: #000 !important;
  border-radius: 50px !important;
  border: none !important;
  overflow: hidden !important; /* ensures inner corners match */
  cursor: pointer;
}

/* Hover state for the shell */
#kw-shc-1:hover, #kw-shc-2:hover, #kw-shc-3:hover, #kw-shc-4:hover, #kw-shc-5:hover, #kw-shc-6:hover, #kw-shc-7:hover {
  background: #253772 !important;
}

/* Inner content wrapper – ensures text is white and spacing matches your other buttons */
#kw-shc-1 .kwc-shcg, #kw-shc-2 .kwc-shcg, #kw-shc-3 .kwc-shcg, #kw-shc-4 .kwc-shcg, #kw-shc-5 .kwc-shcg, #kw-shc-6 .kwc-shcg, #kw-shc-7 .kwc-shcg {
  color: #fff !important;
  padding: 12px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

/* If the text is inside spans/strong/etc, force it too */
#kw-shc-1 .kwc-shcg *, #kw-shc-2 .kwc-shcg *, #kw-shc-3 .kwc-shcg *, #kw-shc-4 .kwc-shcg *, #kw-shc-5 .kwc-shcg *, #kw-shc-6 .kwc-shcg *, #kw-shc-7 .kwc-shcg * {
  color: #fff !important;
}