/* ==========================================================
   QUICK SKIPS / KODA THEME
   Purple + Green styling
   Compact rounded tiles
   ========================================================== */


/* ==========================================================
   NAV BAR AND MOBILE MENU
   ========================================================== */

.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;
}


/* ==========================================================
   PRODUCT GRID / TILE LAYOUT
   Makes the final row centre itself
   ========================================================== */

#product-context .row {
  justify-content: center !important;
  row-gap: 8px;
}


/* ==========================================================
   LIST PANELS / PRODUCT CARDS
   Smaller rounded rectangle tiles
   ========================================================== */

.list-panel {
  position: relative;
  overflow: hidden;

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

  min-height: 205px;
  padding: 14px 14px;
  margin-bottom: 8px;

  color: #fff;
  text-align: center;

  border-radius: 14px !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;

  background: linear-gradient(135deg, #9B59B6 0%, #5B2C6F 100%);

  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);

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

/* Softer shine effect */
.list-panel::after {
  content: '';
  position: absolute;
  top: -80%;
  left: -80%;
  width: 180%;
  height: 180%;
  background: linear-gradient(
    120deg,
    transparent 35%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 65%
  );
  transform: rotate(20deg);
  transition: all 0.5s ease-in-out;
  pointer-events: none;
}

.list-panel:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

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


/* Product images */
.list-panel img {
  max-width: 175px;
  width: 100%;
  height: 90px;
  object-fit: cover;

  border-radius: 9px;
  margin-bottom: 8px;

  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.24);
}


/* Product titles */
.list-panel h1,
.list-panel h2,
.list-panel h3,
.list-panel h4,
.list-panel h5,
.list-panel .title {
  color: #ffffff;
  font-weight: 700;
  margin: 4px 0 2px;
  line-height: 1.1;
}


/* Product description text */
.list-panel p,
.list-panel .description {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  line-height: 1.25;
  margin: 0 0 8px;
}


/* ==========================================================
   BUTTONS
   Rounded rectangle shape
   ========================================================== */

.btn,
.list-panel .btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;

  padding: 0.5em 1.05em;
  min-width: 3.2em;

  border-radius: 10px !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;

  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  text-decoration: none;

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

  box-shadow: 0 4px 10px rgba(61, 241, 137, 0.22);

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

/* Remove any rhombus/skew shape from button pseudo-elements */
.btn::before,
.btn::after,
.list-panel .btn::before,
.list-panel .btn::after,
button::before,
button::after,
input[type="button"]::before,
input[type="button"]::after,
input[type="submit"]::before,
input[type="submit"]::after {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 10px !important;
}

/* Button hover effect */
.btn:hover,
.list-panel .btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  background-color: #33C77F !important;
  border-color: #33C77F !important;
  color: #8E44AD !important;
  transform: translateY(-1px);
  box-shadow: 0 7px 15px rgba(61, 241, 137, 0.32);
}

/* Button focus effect */
.btn:focus,
.list-panel .btn:focus,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(61, 241, 137, 0.4) !important;
}

/* Pagination current page */
.btn.kwc-pagb.btn-primary {
  background-color: #33C77F !important;
  border-color: #33C77F !important;
  color: #8E44AD !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;
}

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);
}


/* ==========================================================
   CALENDAR BASE STYLING
   Colours retained, hover/shadow effects removed
   ========================================================== */

#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;
}

#date-form tbody.kwc-caltbd::before,
.custom-calendar table.calendar-table tbody::before {
  display: none !important;
  content: none !important;
}

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

#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;
}

#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;
}


/* ==========================================================
   CALENDAR OTHER MONTH DAYS
   ========================================================== */

.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;
}


/* ==========================================================
   CALENDAR BLOCKED CELLS
   ========================================================== */

#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%);
}

#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;
}

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


/* ==========================================================
   CALENDAR SUNDAYS
   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;
}


/* ==========================================================
   CALENDAR AVAILABLE DAYS
   ========================================================== */

#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;
}


/* ==========================================================
   CALENDAR TODAY
   ========================================================== */

#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;
}


/* ==========================================================
   CALENDAR SELECTABLE DAY HOVER
   ========================================================== */

#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;
}

#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
   ========================================================== */

.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
   ========================================================== */

@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;
  }
}

/* ==========================================================
   CENTRE BOTTOM ROW TILES
   ========================================================== */

.landing-root {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Make all product tiles same width */
.home-panel.home-products,
.home-panel.home-exchange {
  width: 24% !important;
  min-width: 260px;
}

/* ==========================================================
   BRANDED PAGE BACKGROUND
   Subtle background detail for side gaps
   ========================================================== */

body {
  background:
    radial-gradient(circle at 8% 20%, rgba(61, 241, 137, 0.16) 0, transparent 22%),
    radial-gradient(circle at 92% 18%, rgba(142, 68, 173, 0.22) 0, transparent 24%),
    radial-gradient(circle at 12% 82%, rgba(142, 68, 173, 0.18) 0, transparent 26%),
    radial-gradient(circle at 88% 78%, rgba(61, 241, 137, 0.12) 0, transparent 22%),
    linear-gradient(135deg, #f8f4fb 0%, #ffffff 45%, #f4eef8 100%);
  min-height: 100vh;
}

/* ==========================================================
   TILE POLISH
   ========================================================== */

.list-panel {
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 10px 24px rgba(74, 35, 90, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.list-panel:hover {
  transform: translateY(-4px);
  box-shadow:
    0 16px 34px rgba(74, 35, 90, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}