@charset "UTF-8";
/* Allow flex parents (tabs/layout) to shrink this area */
.row.form-group .col-xs-12,
.row.form-group .colour-scroll-wrapper {
  min-width: 0 !important;
}

/* Viewport: fixed width, scrolls horizontally */
.colour-scroll-wrapper {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;

  /* debug: remove later if you like */
  /* background: rgba(0, 0, 0, 0.02); */
  /* border: 1px solid rgba(0,0,0,0.05); */
}

/* Long row inside the viewport */
.colour-scroll {
  display: block;
  white-space: nowrap;
}

/* Each colour card */
.colour-item {
  display: inline-block !important;
  vertical-align: top;
  width: 85px;          /* tweak to suit */
  margin-right: 0px;
  text-align: center;
  white-space: normal;   /* allow text inside to wrap */
}

/* Each colour card */
.colour-item-upvc {
  display: inline-block !important;
  vertical-align: top;
  width: 150px;          /* tweak to suit */
  margin-right: 0px;
  text-align: center;
  white-space: normal;   /* allow text inside to wrap */
}

.colour-item:last-child {
  margin-right: 0;
}

.colour-item-upvc:last-child {
  margin-right: 0;
}


/* Optional: snap scrolling (modern browsers) */
.colour-scroll-wrapper {
  scroll-snap-type: x mandatory;
}

.colour-item {
  scroll-snap-align: start;
}

.colour-item-upvc {
  scroll-snap-align: start;
}
		/* Outer container with arrows */
.colour-scroll-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%;
  max-width: 100%;
}

/* Make sure this can shrink inside flex layouts */
.colour-scroll-container,
.colour-scroll-wrapper {
  min-width: 0 !important;
}

/* Viewport */
.colour-scroll-wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Arrow buttons */
.colour-scroll-btn {
  border: none;
  background: #FFF;
  color: #000;
  font-size: 40px;
  line-height: 1;
  width: 32px;

  /* Use margins instead of padding */
  margin-top: 20px;
  margin-bottom: 60px;
  margin-left: 5px;
  margin-right: 5px;	

  padding: 0; /* remove padding so button stays small */

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.colour-scroll-btn:hover {
  background: #d0d0d0;
}

@media (max-width: 767px) {
  .colour-scroll-btn {
    font-size: 18px;
    width: 28px;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
.colour-scroll-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.colour-card {
  display: block;
  cursor: pointer;
}

/* Optional: highlight selected colour card */
.colour-card input[type="radio"]:checked + .u-check-icon-radio-v4 i {
  /* you probably already have a checked style via g-bg-red--checked */
}

/* Extra highlight for the whole card when selected */
.colour-card input[type="radio"]:checked ~ img,
.colour-card input[type="radio"]:checked ~ small {
  /* e.g.: */
  /* filter: brightness(1.05); */
}

.colour-card:hover img {
  /* subtle hover */
  /* transform: translateY(-1px); */
}
/* Base card look */
.colour-card {
  display: block;
  cursor: pointer;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: all .2s ease;
}

/* Hover state */
.colour-card:hover {
  border-color: #bbb;
}

/* ---- SELECTED STATE ---- */
.colour-card input[type="radio"]:checked ~ img,
.colour-card input[type="radio"]:checked ~ small,
.colour-card input[type="radio"]:checked ~ .u-check-icon-radio-v4 {
  /* makes sure contents update if needed */
}

/* Highlight whole card when selected */
.colour-card input[type="radio"]:checked {
  /* must target the card itself */
}

/* Use parent selector trick */
.colour-card input[type="radio"]:checked:checked + * {
  /* intentionally blank */
}

/* Reliable selected styling for the card */
.colour-card input[type="radio"]:checked + .u-check-icon-radio-v4,
.colour-card input[type="radio"]:checked ~ .u-check-icon-radio-v4,
.colour-card input[type="radio"]:checked ~ img,
.colour-card input[type="radio"]:checked ~ small {
  /* still applying content changes */
}

/* The actual visual highlight */
.colour-card input[type="radio"]:checked {
  outline: none;
}

.colour-card input[type="radio"]:checked:after {
  /* empty (not used) */
}

/* Final: highlight the WHOLE card using the label itself */
.colour-card input[type="radio"]:checked {
  /* nothing here yet */
}

.colour-card input[type="radio"]:checked + .u-check-icon-radio-v4 {
  /* your existing interior icon will show red, good */
}

/* Best method: style the label when radio is checked */
.colour-card input[type="radio"]:checked {
  /* nothing here */
}

.colour-card input[type="radio"]:checked:checked {
  /* nothing */
}

/* Using new selector that always works: */
.colour-card input[type="radio"]:checked {
  /* to ensure label inherits selected styling via JS, fallback included below */
}

/* Apply highlight using the parent label class */
.colour-card input[type="radio"]:checked {
  /* still nothing */
}

/* WORKING SELECTED CARD STYLING */
.colour-card input[type="radio"]:checked ~ * {
  /* optional */
}

.colour-card input[type="radio"]:checked:checked ~ * {
  /* optional */
}

/* FINAL — apply directly to the label using :has() (modern browsers) */
.colour-card:has(input[type="radio"]:checked) {
  border-color: #ff0000;
  background: #fff6f6;
}

/* Fallback for older browsers using JS (provided below) */
.colour-card.selected {
  border-color: #ff0000;
  background: #fff6f6;
  box-shadow: 0 0 0 2px rgba(255,0,0,0.2);
}
/* Tick overlay (hidden by default) */
.colour-tick {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  background: #ff0000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 0 6px rgba(0,0,0,0.25);
  opacity: 0;
  transform: scale(0.6);
  transition: all .2s ease;
}

/* The tick icon itself */
.colour-tick::after {
  content: "✔";
  line-height: 1;
}

/* Show tick when card is selected */
.colour-card.selected .colour-tick {
  opacity: 1;
  transform: scale(1);
}