/* --- Changing Nav Bar and Mobile Menu to Quick Skips colours --- */
.navbar {
  background-color: #8E44AD;
  color: #3DF189;
}

.navbar li.nav-item a:hover,
.navbar li.nav-item a:focus {
  color: #3DF189;
}

.mobile-nav-panel,
.mobile-nav-panel .mobile-nav-panel-header {
  background-color: #8E44AD;
}


/* --- List Panel --- */
.list-panel {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 20px;
  margin-bottom: 15px;
  color: #fff;
  border-radius: 12px;

  /* Asymmetric / wavy shape */
  clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);

  /* Gradient background */
  background: linear-gradient(to right, #8E44AD, #401F4E);

  /* Smooth transitions for hover */
  transition: all 0.4s ease-in-out;
}

/* Overlay/glow effect using pseudo-element */
.list-panel::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
  transition: all 0.5s ease-in-out;
  pointer-events: none;
}

/* Hover effect for panels */
.list-panel:hover {
  transform: scale(1.03);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

.list-panel:hover::after {
  top: -25%;
  left: -25%;
}


/* --- Buttons --- */
.btn,
.list-panel .btn {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1em;
  padding: 0.5em 1em;
  min-width: 3.5em;
  border-radius: 8px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;

  color: #8E44AD !important;
  background-color: #3DF189 !important;
  border: 1px solid #3DF189 !important;

  transition: all 0.3s ease-in-out;
}

/* Hover effect for buttons */
.btn:hover,
.list-panel .btn:hover {
  background-color: #33C77F !important;
  border-color: #33C77F !important;
  color: #8E44AD !important;
}

/* Focus effect for accessibility */
.btn:focus,
.list-panel .btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(61, 241, 137, 0.4);
}

/* Pagination - make current 'page' a different colour */
.btn.kwc-pagb.btn-primary {
  background-color: #33C77F !important;
}


/* --- Progress Header --- */
.progress-header {
  background: linear-gradient(to right, #8E44AD, #401F4E);
  color: #3DF189;
  margin-top: 1px;
  margin-bottom: 1em;
  padding: 10px 15px;
  border-radius: 8px;
  font-weight: bold;
  text-align: left;
}


/* --- Breadcrumb items --- */
ul.breadcrumb li {
  display: block;
  float: left;
  margin-right: 2em;
  position: relative;
  color: #3DF189;
}

/* Current breadcrumb underline */
ul.breadcrumb li.current::after {
  content: "";
  display: block;
  background-color: white;
  position: absolute;
  height: 3px;
  left: 1px;
  right: 1px;
  bottom: -2px;
}


/* --- Postcode Input --- */
.composite-address-input .postcode-input {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 49px;
  font-size: 1.2em;
  color: #8E44AD;
  padding: 0 10px;
  margin: 0;
  border: none;
  text-transform: uppercase;
  overflow: hidden;
  border-radius: 5px;
}


/* --- Skip Capacity --- */
.skip-capacity {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background-color: #3DF189 !important;
  color: black;
  text-align: center;
}


/* --- Wheely Bins --- */
.wheely-bins {
  text-align: center;
  font-weight: bold;
  color: #fff;
  background-image: url(~/image/ChatGPT%20Image%20Feb%206,%202026%20at%2002_05_27%20PM.png?v=d251d808&s=0);
}


/* =========================
   KODA THEME CALENDAR
   Calendar colours retained, hover/shadow effects removed
   ========================= */

/* Calendar body - no shadow, zoom, or animated glow */
#date-form tbody.kwc-caltbd,
.custom-calendar table.calendar-table tbody {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: none !important;
  transition: none !important;
  transform: none !important;
}

/* Remove previous pseudo glow overlay */
#date-form tbody.kwc-caltbd::before,
.custom-calendar table.calendar-table tbody::before {
  display: none !important;
  content: none !important;
}

/* Disable tbody hover movement/shadow */
#date-form tbody.kwc-caltbd:hover,
.custom-calendar table.calendar-table tbody:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* Base calendar cell frame */
#date-form tbody.kwc-caltbd td,
.custom-calendar table.calendar-table td {
  border-radius: 10px;
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Disable all date-cell hover lift/glow/shadow */
#date-form tbody.kwc-caltbd td:hover,
.custom-calendar table.calendar-table td:hover,
#date-form tbody.kwc-caltbd td:hover *,
.custom-calendar table.calendar-table td:hover * {
  transform: none !important;
  box-shadow: none !important;
}


/* Other month stays greyed */
.custom-calendar table.calendar-table td.otherMonth,
#date-form tbody.kwc-caltbd td.otherMonth {
  background: #ddd !important;
  border: 2px solid #ddd !important;
  color: #999 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.custom-calendar table.calendar-table td.otherMonth:hover,
#date-form tbody.kwc-caltbd td.otherMonth:hover {
  background: #ddd !important;
  border-color: #ddd !important;
  color: #999 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}


/* ==========================================================
   Blocked cells - light purple with black diagonal splash
   ========================================================== */
#date-form tbody.kwc-caltbd td[style*="linear-gradient("],
.custom-calendar table.calendar-table td[style*="linear-gradient("],
#date-form tbody.kwc-caltbd td[style*="#ddd 50%"],
.custom-calendar table.calendar-table td[style*="#ddd 50%"] {
  background-color: #C39BD3 !important;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.45) 0px,
    rgba(0, 0, 0, 0.45) 10px,
    rgba(0, 0, 0, 0.15) 10px,
    rgba(0, 0, 0, 0.15) 20px
  ) !important;
  border-color: #C39BD3 !important;
  color: #4A235A !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  filter: grayscale(35%);
}

/* No hover, no glow, no transform on blocked cells */
#date-form tbody.kwc-caltbd td[style*="linear-gradient("]:hover,
.custom-calendar table.calendar-table td[style*="linear-gradient("]:hover,
#date-form tbody.kwc-caltbd td[style*="#ddd 50%"]:hover,
.custom-calendar table.calendar-table td[style*="#ddd 50%"]:hover {
  background-color: #C39BD3 !important;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.45) 0px,
    rgba(0, 0, 0, 0.45) 10px,
    rgba(0, 0, 0, 0.15) 10px,
    rgba(0, 0, 0, 0.15) 20px
  ) !important;
  border-color: #C39BD3 !important;
  color: #4A235A !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}

/* Prevent pointer interaction inside blocked tiles */
#date-form tbody.kwc-caltbd td[style*="linear-gradient("] *,
.custom-calendar table.calendar-table td[style*="linear-gradient("] * {
  pointer-events: none;
}


/* ==========================================================
   Sundays greyed out - Mon-first calendar, Sunday = 7th column
   ========================================================== */
#date-form tbody.kwc-caltbd tr td:nth-child(7),
.custom-calendar table.calendar-table tr td:nth-child(7) {
  background-color: #ddd !important;
  border: 2px solid #ddd !important;
  color: #999 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  filter: grayscale(35%);
}

#date-form tbody.kwc-caltbd tr td:nth-child(7):hover,
.custom-calendar table.calendar-table tr td:nth-child(7):hover {
  background-color: #ddd !important;
  border-color: #ddd !important;
  color: #999 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}


/* ===================================
   Remap available day colour - green to purple
   =================================== */
#date-form tbody.kwc-caltbd td[style*="#348b41"],
.custom-calendar table.calendar-table td[style*="#348b41"],
.custom-calendar table.calendar-table td.isSelectable {
  background: none !important;
  background-color: #8E44AD !important;
  border-color: #8E44AD !important;
  color: #ffffff !important;
}


/* ===================================
   Today - yellow to light green
   =================================== */
#date-form tbody.kwc-caltbd td[style*="#fdea14"],
.custom-calendar table.calendar-table td[style*="#fdea14"],
.custom-calendar table.calendar-table td.today {
  background: none !important;
  background-color: #3DF189 !important;
  border-color: #3DF189 !important;
  color: #8E44AD !important;
  font-weight: bold;
}


/* ===================================
   Selectable day hover - colour change only, no shadow or zoom
   Remove this section if you want absolutely no hover colour change.
   =================================== */
#date-form tbody.kwc-caltbd td.isSelectable:hover,
.custom-calendar table.calendar-table td.isSelectable:hover,
#date-form tbody.kwc-caltbd td.isSelectable:hover *,
.custom-calendar table.calendar-table td.isSelectable:hover * {
  background-color: #3DF189 !important;
  border-color: #3DF189 !important;
  color: #8E44AD !important;
  transform: none !important;
  box-shadow: none !important;
}


/* Keep blocked cells from changing on hover - extra safety */
#date-form tbody.kwc-caltbd td[style*="#ddd"]:hover,
.custom-calendar table.calendar-table td[style*="#ddd"]:hover {
  background-color: #ddd !important;
  border-color: #ddd !important;
  color: #999 !important;
  box-shadow: none !important;
  transform: none !important;
}


/* =========================
   Calendar inner wrappers
   Stop inner <a> / <div> from painting its own square background
   ========================= */
.custom-calendar table.calendar-table td > div,
.custom-calendar table.calendar-table td > div > a,
#date-form tbody.kwc-caltbd td > div,
#date-form tbody.kwc-caltbd td > div > a {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  border-radius: 10px;
  color: inherit !important;
  text-decoration: none !important;
}

.custom-calendar table.calendar-table td > div > a:hover,
#date-form tbody.kwc-caltbd td > div > a:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}


/* =========================
   Review Form Text Overrides
   ========================= */
#review-form > div.container > div:nth-child(4) > div > h2 {
  position: relative !important;
  color: transparent !important;
}

#review-form > div.container > div:nth-child(4) > div > h2::after {
  content: "Asbestos and Skip Hire Notice";
  position: absolute;
  left: 0;
  top: 0;
  color: #212529;
  font-size: 2rem;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  white-space: nowrap;
}

#review-form > div.container > div:nth-child(4) > div > p > label {
  position: relative !important;
  color: transparent !important;
}

#review-form > div.container > div:nth-child(4) > div > p > label::after {
  content: "I have read and acknowledged the Asbestos and Skip Hire Notice";
  position: absolute;
  left: 32px;
  top: 0;
  color: #212529;
  font-size: 1rem;
  font-weight: 400;
  white-space: normal;
}


/* --- Custom Checkboxes --- */
.customcheck-o {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: white;
  border: 1px solid #33C77F !important;
}

.customcheck ~ .customcheck-o .fa-check {
  opacity: 0;
  position: relative;
  font-size: 18px;
  left: 2px;
  top: 2px;
  color: #fff;
}

.customcheck-label:hover > .customcheck-o {
  background-color: #8E44AD !important;
  color: white;
}

.customcheck:checked ~ .customcheck-o {
  background-color: #8E44AD;
}


/* --- Headings --- */
h1 .alt,
h2 .alt,
h3 .alt,
h4 .alt,
h5 .alt {
  font-weight: normal;
  color: #33C77F;
}


/* =========================
   Dialog Styling
   ========================= */
.full-page-overlay .dialog-container .dialog-title {
  position: relative;
  margin: 0;
  padding: 10px 15px 7px 15px;
  background-color: #8E44AD !important;
  color: white;
}

@media screen and (max-width: 800px) {
  .dialog-panel {
    min-width: 80%;
  }
}


/* ------------ POSTCODE SEARCH LAYOUT FIXES ------------
   Mobile <=500px: place action buttons below input
   Desktop >=768px: use 10/2 split for form and image
   ------------------------------------------------------ */
@media (max-width: 500px) {
  .composite-address-input.postcode-composite {
    width: 100% !important;
    height: 50px !important;
    overflow: visible !important;
    margin-bottom: 52px !important;
  }

  .composite-address-input .postcode-input,
  .composite-address-input .postcode-input.wide {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    line-height: 49px !important;
  }

  .composite-address-input .postcode-buttons {
    position: absolute !important;
    left: 0 !important;
    top: calc(100% + 8px) !important;
    right: auto !important;
    margin: 0 !important;
    display: flex !important;
    gap: 8px;
    align-items: center;
  }

  .composite-address-input .postcode-buttons .postcode-go {
    margin-left: 0 !important;
  }

  .composite-address-input .postcode-buttons .btn,
  .composite-address-input .postcode-buttons button {
    min-width: auto !important;
    white-space: nowrap;
  }

  #product-context .kwc-podsh {
    position: static !important;
    right: auto !important;
    display: inline-flex;
    align-items: center;
    margin: 0 0 10px 0;
    float: none !important;
  }

  #product-context .col-lg-7 > h2 {
    clear: both;
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  #postcode-form .row > .col-md-6:first-child {
    flex: 0 0 83.333333% !important;
    max-width: 83.333333% !important;
  }

  #postcode-form .row > .col-md-6:last-child {
    flex: 0 0 16.666667% !important;
    max-width: 16.666667% !important;
    padding-left: 12px !important;
  }
}


/* --- Landing Page Responsive Styling --- */
@media screen and (max-width: 400px) {
  .home-panel.home-bags,
  .home-panel.home-exchange,
  .home-panel.home-products,
  .home-panel.home-sign-in {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .home-products {
    width: 50% !important;
  }

  .home-sign-in {
    width: 100% !important;
  }
}

@media screen and (min-width: 801px) {
  .home-products {
    width: 25% !important;
  }

  .home-sign-in {
    width: 100% !important;
  }
}


/* --- Progress Header Responsive Styling --- */
@media screen and (max-width: 500px) {
  .progress-header .flex-col {
    max-width: 100%;
  }

  .progress-image {
    display: none;
  }
}