#online-order-container > div.landing-root > div.home-panel.home-bags.dw33.nw100 {
	width: 50%;
}

#online-order-container > div.landing-root > div.home-panel.home-sign-in.dw50.nw100 {
        width: 100%;
}

#select-product-form > div.container.pt-0 > div.row.narrow-gutters > div > a > div.embed-responsive.embed-responsive-1by1 {
	display: none;
}

#product-form .radio-button-strip {
	display: none;
}

:root {
  --sts-navy: #272a40;
  --sts-orange: #f39200;
  --sts-bg: #f5f5f7;          /* soft page background */
  --sts-card: #ffffff;        /* cards / panels */
  --sts-text: #111827;        /* main text */
  --sts-radius-lg: 16px;
  --sts-radius-md: 10px;
  --sts-shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.08);
}

/* Base typography + background */
body {
  background: var(--sts-bg);
  color: var(--sts-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Primary buttons to match Skip The Skip orange CTA */
button,
.btn,
.btn-primary {
  background: var(--sts-orange) !important;
  border-color: var(--sts-orange) !important;
  color: #ffffff !important;
  border-radius: var(--sts-radius-md) !important;
  font-weight: 600;
}

./* Main Skip The Skip header above the calculator */
.sts-main-header {
  background: var(--sts-navy);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  color: #ffffff;
}

.sts-main-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.sts-logo img {
  display: block;
  max-height: 52px;
}

/* Right-hand text block */
.sts-main-meta {
  text-align: right;
  color: #ffffff;
}

.sts-tagline {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-bottom: 0.25rem;
  opacity: 0.9;
}

.sts-contact {
  font-size: 0.95rem;
}

.sts-area {
  margin-right: 0.75rem;
  opacity: 0.8;
}

/* Phone pill – white on navy with orange border */
.sts-phone {
  color: var(--sts-orange);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--sts-orange);
  background: #ffffff;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
}

/* Mobile layout */
@media (max-width: 768px) {
  .sts-main-header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .sts-main-meta {
    text-align: left;
  }

  .sts-area {
    display: block;
    margin: 0 0 0.15rem 0;
  }
}

/* Make the contact line a flexible row that can wrap nicely */
.sts-contact {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* On mobile, align left to match the stacked layout */
@media (max-width: 768px) {
  .sts-contact {
    justify-content: flex-start;
  }
}



/* Nuke the yellow and tidy the step bar */
.progress-header,
.progress-header > div {
  background: #ffffff !important;
  color: var(--sts-navy) !important;
  border: none !important;
}

/* Step text inside the bar */
.progress-header h1,
.progress-header h2,
.progress-header a,
.progress-header span {
  color: var(--sts-navy) !important;
  font-weight: 600;
}

/* Main calculator panel */
.page-scope {
  max-width: 1100px !important;
  margin: 2rem auto 3rem !important;
  padding: 2rem 2.5rem !important;
  background: var(--sts-card) !important;
  border-radius: var(--sts-radius-lg) !important;
  box-shadow: var(--sts-shadow-soft) !important;
}

/* Headings inside the card */
.page-scope h1,
.page-scope h2 {
  color: var(--sts-navy);
  margin-bottom: 1.25rem;
}

/* Give the whole app area a navy band */
body {
  background: var(--sts-navy);
}

/* Calculator card stays white on top */
.page-scope,
.container.page-scope {
  background: #ffffff !important;
  box-shadow: var(--sts-shadow-soft) !important;
  border-radius: var(--sts-radius-lg) !important;
}

/* Navy background for the overall app */
body {
  background: var(--sts-navy);
}

/* Main calculator card */
.container.page-scope,
.page-scope {
  max-width: 960px !important;
  margin: 2.5rem auto 4rem !important;
  padding: 2.5rem 2.25rem !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important;
}

/* Headings inside the card */
.page-scope h1,
.page-scope h2 {
  color: var(--sts-navy);
  margin-bottom: 1.25rem;
}

/* Make content text white on the navy background */
.page-scope,
.page-scope p,
.page-scope label,
.page-scope span,
.page-scope h1,
.page-scope h2,
.page-scope h3 {
  color: #ffffff !important;
}

/* Links / emphasis in orange */
.progress-header a,
.page-scope a {
  color: var(--sts-orange) !important;
}

/* Active step can be a bit stronger */
.progress-header a {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.progress-header a[style*="font-weight: bold"],
.progress-header a.active {
  border-bottom-color: var(--sts-orange);
}

/* Inputs stay white so they’re legible against the navy */
.page-scope input,
.page-scope select,
.page-scope textarea {
  background: #ffffff;
  color: #111827;
  border-radius: 8px;
}

/* Hide the boring placeholder image */
.progress-header img {
  display: none !important;
}

/* Still hide the default grey icon */
.progress-header img {
  display: none !important;
}

/* Work with the inner container so Skippy sits next to the title block */
.progress-header > .container {
  position: relative;
  max-width: 1100px;          /* same width as the rest of the app */
  margin: 0 auto;
  padding-left: 100px;        /* space for Skippy */
  display: flex;
  align-items: center;
}

/* Big Skippy, tight against the header + breadcrumbs */
.progress-header > .container::before {
  content: "";
  position: absolute;
  left: 0;                    /* right on the container edge */
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 120px;
  background-image: url("https://skiptheskip.kodawaste.co.uk/image/skip%20the%20skip%20kangaroo.jpg?v=b778edf0&s=0");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Keep the bar itself just a plain white strip */
.progress-header {
  background: #ffffff !important;
  padding: 0.75rem 0;         /* no left padding here */
}

/* Any 'success' green inside the calculator becomes our colour instead */
.page-scope .text-success,
.page-scope .form-control.valid,
.page-scope [style*="#28a745"],
.page-scope [style*="rgb(40, 167, 69)"],
.page-scope [style*="0, 128, 0"] {
  color: #111827 !important;          /* dark text instead of green */
}

/* And if they colour the border green, we take that over too */
.page-scope .form-control.valid,
.page-scope .form-control[style*="#28a745"],
.page-scope .form-control[style*="rgb(40, 167, 69)"] {
  border-color: var(--sts-orange) !important;   /* optional: orange 'valid' border */
}

/* Postcode page heading + helper text */
#postcode-form h2.spaced {
  color: #ffffff !important;
}

#postcode-form .markdown-container {
  color: rgba(255, 255, 255, 0.75) !important; /* softer white for the small copy */
}

/* Composite postcode input styling */
#postcode-form .composite-address-input {
  color: #111827 !important;            /* default text colour */
}

/* Actual text inside the postcode box */
#postcode-form .postcode-input {
  color: #111827 !important;            /* value text (EX5 2JD etc) */
  border-radius: 8px;
}

/* Placeholder colour (before they type) */
#postcode-form .postcode-input::placeholder {
  color: rgba(17, 24, 39, 0.55);
}

/* GLOBAL STEP HEADERS – applies to ALL steps */

/* Make everything in the top 'spaced-top' container white by default */
html body .buy-container.page-scope .container.spaced-top {
  color: #ffffff !important;
}

/* Headings in that container */
html body .buy-container.page-scope .container.spaced-top h1,
html body .buy-container.page-scope .container.spaced-top h2,
html body .buy-container.page-scope .container.spaced-top h3 {
  color: #ffffff !important;
}

/* Softer white for the little paragraph under each heading */
html body .buy-container.page-scope .container.spaced-top .markdown-container {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Links up there (if any) use orange */
html body .buy-container.page-scope .container.spaced-top a {
  color: var(--sts-orange) !important;
}

/* GLOBAL STEP HEADERS & TOP TEXT ON ALL CALCULATOR PAGES  */

/* Headings like "Enter Postcode", "Select Waste Type", "Select Collection Date"... */
html body .container.spaced-top h2.spaced {
  color: #ffffff !important;
}

/* The small paragraph under each step heading (if present) */
html body .container.spaced-top .markdown-container {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Any labels / selects in that top block (e.g. "Collection time" + dropdown) */
html body .container.spaced-top label,
html body .container.spaced-top select {
  color: #ffffff !important;
}

/* Make "Select Waste Type" (and any other h2.form-label) white */
.buy-container.page-scope h2.form-label {
  color: #ffffff !important;
}

/* Make the little description line under it softer white */
.buy-container.page-scope h2.form-label + .markdown-container {
  color: rgba(255, 255, 255, 0.75) !important;
}/* FORCE "Select Waste Type" (h2.form-label) TO WHITE ON THIS CALCULATOR */
h2.form-label {
  color: #ffffff !important;
}

/* The line directly under it */
h2.form-label + .markdown-container {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Step titles like "Select the Service Required", "Select Collection Date" etc. */
.page-scope h2 {
  color: #ffffff !important;
}

/* The small paragraph directly under each step title */
.page-scope h2 + .markdown-container {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Force step titles in the calculator to white */
#container-form h2 {
  color: #ffffff !important;
}

/* The little description line directly under each title */
#container-form h2 + .markdown-container {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Step titles in the calculator */
h2.form-label,
h2.row {
    color: #ffffff !important;
}

/* Calculator step headings (e.g. "Select Collection Date") */
.page-scope h2 {
    color: #ffffff !important;
}

#date-form > div:nth-child(13) > div:nth-child(1) > div > h2 {
  color: #ffffff !important;
}

/* Make the "Collection time" text white */
#date-form > div:nth-child(13) > div:nth-child(3) > div {
  color: #ffffff !important;
}

/* Keep the dropdown itself readable (dark text on white) */
#date-form > div:nth-child(13) > div:nth-child(3) > div select {
  color: #111827 !important;
  background-color: #ffffff !important;
}

/* Make all text in the review form container white */
#review-form > div.container {
  color: #ffffff !important;
}

/* Review table – alternating orange rows */
#review-form > div.container > div:nth-child(3) > div.col-md-8 > table {
  border-collapse: collapse;
}

/* Odd rows – brand orange */
#review-form > div.container > div:nth-child(3) > div.col-md-8 > table tr:nth-child(odd) td {
  background: #f39200;
  color: #ffffff !important;   /* override global white if needed */
}

/* Even rows – lighter orange */
#review-form > div.container > div:nth-child(3) > div.col-md-8 > table tr:nth-child(even) td {
  background: #ffd08a;
  color: #272a40 !important;   /* dark navy text for contrast */
}

/* Optional: tidy borders */
#review-form > div.container > div:nth-child(3) > div.col-md-8 > table td {
  border: none;
  padding: 4px 8px;
}

#review-form > div.container > div:nth-child(3) > div.col-md-4 > h4:nth-child(12) {
  color: #f39200 !important; /* Skip The Skip orange */
  font-weight: 700;          /* optional, makes it pop */
}

#review-form > div.container > div:nth-child(3) > div.col-md-4 > h2:nth-child(13) > span:nth-child(1) {
  color: #f39200 !important; /* Skip The Skip orange */
  font-weight: 700;          /* optional, makes it pop */
}

#review-form > div.container > div:nth-child(3) > div.col-md-4 > h2:nth-child(13) > span:nth-child(2) {
  color: #f39200 !important; /* Skip The Skip orange */
  font-weight: 700;          /* optional, makes it pop */
}

/* All capacity tiles – navy background, orange border, white text */
.skip-capacity {
  background-color: #272a40 !important;  /* navy */
  border: 2px solid #f39200 !important;  /* orange */
  color: #ffffff !important;             /* text */
}

/* Make sure any text inside stays white */
.skip-capacity * {
  color: #ffffff !important;
}

.custom-calendar table.calendar-table td.today {
    background: none;
    background-color: #f39200;
    border-color: #f39200;
    color: #ffffff;
}

.custom-calendar table.calendar-table td.isSelectable {
    background: none;
    background-color: #272a40;
}
.custom-calendar table.calendar-table td {
    text-align: center;
    vertical-align: middle;
    height: 5em;
    padding: 5px 10px;
    position: relative;
    transition: height 0.6s, font-size 0.6s;
    border: 1px solid #272a40;
    color: #f39200;
    border-radius: 10px;
}

#date-form > div:nth-child(13) > div:nth-child(5) > div > div > div > table > tbody > tr > td.month > h2 {
    color: #f39200 !important;   /* brand orange */
}

.full-page-overlay .dialog-container .dialog-title {
    position: relative;
    margin: 0;
    padding: 10px 15px 7px 15px;
    background-color: #f39200;
    color: white;

}

ul.breadcrumb li.current:after {
    content: "";
    display: block;
    background-color: #f39200;

}

.allowed-tile {
    background-color: #272a40;
    border-radius: 10px;
    color: white;
}

.composite-address-input .postcode-input {
    position: absolute;
    color: #f39200;

}

h1, h2, h3, h4, h5 {
    font-family: 'Impact', sans-serif;
    font-weight
}

/* Force black text on the specific review table */
#review-form > div.container > div:nth-child(3) > div.col-md-8 > div:nth-child(3) > table,
#review-form > div.container > div:nth-child(3) > div.col-md-8 > div:nth-child(3) > table th,
#review-form > div.container > div:nth-child(3) > div.col-md-8 > div:nth-child(3) > table td {
  color: #000000 !important;
}

/* --- Calculator footer base --- */
.sts-calculator-footer {
  background: #272a40; /* fallback if CSS vars aren’t set */
  background: var(--sts-navy, #272a40);
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.75rem 1.5rem 2.25rem;
  font-size: 0.9rem;
}

.sts-cal-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

/* --- Left: logo & strapline --- */
.sts-cal-footer-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 220px;
}

.sts-cal-footer-logo {
  max-width: 210px;
  height: auto;
  display: block;
}

.sts-cal-footer-tagline {
  margin: 0;
  max-width: 260px;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* --- Middle: review block --- */
.sts-cal-footer-middle {
  text-align: center;
  flex: 1 1 220px;
}

.sts-cal-reviews-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.8;
  margin-bottom: 0.2rem;
}

.sts-cal-reviews-stars {
  font-size: 1.2rem;
  color: #f9b234;
  margin-bottom: 0.1rem;
}

.sts-cal-reviews-score {
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.sts-cal-rating {
  font-size: 1.1rem;
  color: var(--sts-orange, #f39200);
}

.sts-cal-reviews-count {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* --- Right: buttons --- */
.sts-cal-footer-right {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
  min-width: 200px;
}

.sts-cal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    transform 0.12s ease;
}

/* Solid orange button */
.sts-cal-btn-solid {
  background: var(--sts-orange, #f39200);
  color: #272a40;
  border-color: var(--sts-orange, #f39200);
}

.sts-cal-btn-solid:hover {
  background: #ffa733;
  border-color: #ffa733;
  transform: translateY(-1px);
}

/* Outline button */
.sts-cal-btn-outline {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.7);
}

.sts-cal-btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #ffffff;
  transform: translateY(-1px);
}

/* --- Responsive tweaks --- */
@media (max-width: 900px) {
  .sts-cal-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .sts-cal-footer-middle {
    text-align: left;
  }

  .sts-cal-footer-right {
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .sts-cal-footer-logo {
    max-width: 170px;
  }

  .sts-calculator-footer {
    padding: 1.5rem 1.1rem 1.8rem;
  }
}

.list-panel {
    display: block;
    background-color: #FFFFFF;

}

.badge-success {
    color: #fff;
}

.badge-success {
    color: #fff;
    background-color: #f39200;
}

#container-form > div:nth-child(9) > div:nth-child(1) > div > div:nth-child(3) > label {
  color: #ffffff !important;
}

.home-sign-in .list-panel p {
    visibility: hidden;
}

.breadcrumb li:nth-child(2) {
    display: none;
}

.composite-address-input .selected-address-summary {
    position: absolute;
    left: 10px;
    top: 0;
    width: calc(100% - 95px);
    line-height: 49px;
    font-size: 1.2em;
    color: #f39200;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-calendar .custom-calendar-nav .custom-calendar-nav-date .month {
    text-align: center;
    color: #f39200;
}

#date-form > div:nth-child(27) > div:nth-child(1) > div > h2 {
  color: #fff !important;
}

/* Label + everything in that row */
#date-form .col-12.align-center:has(#CollectionTime){
  color: #fff !important;
}

#postcode-form > div.container > div > div > div.address-selection-container > div > div:nth-child(2) > p {
  color: #fff !important;
}