/* **** Car TYPE (CAR GROUP) Selection *** */

/* Grid Container */
.webform-entity-radios--wrapper .js-webform-webform-entity-radios {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--margin-xs);
}

/* Individual Card Item */
.form-item-car-group {
  padding: 0;
  border: 1px solid var(--grey-light-1);
  border-radius: var(--br-s);
  transition: all 0.2s ease;
  background-color: var(--white-original);
  
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--margin-xs);
  cursor: pointer;
  position: relative;
  height: 100%; 
  width: 100%;
}

/* Hide the actual radio button */
.form-item-car-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  background: linear-gradient(90deg, var(--white-original), var(--white));
  border: 0;
}

/* Label Styling */
.form-item-car-group label {
  cursor: pointer;
  width: 100%;
  text-align: center;
  font-weight: var(--fw-semibold);
  color: var(--blue-dark-1);
  
  /* no need to use flex */
  
  
}

/* Restore font-size for spans inside label */
.form-item-car-group label > span {
  font-size: var(--fs-p2);
  display: block;
  margin-bottom: var(--margin-xxs);
}

/* Specific styling for parts */
.form-item-car-group label .views-field-title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--blue-base);

}

.form-item-car-group label .views-field-field-subtitle {
  font-size: var(--fs-p2);
  color: var(--grey-dark-1);
}

.form-item-car-group label .views-field-field-image {
  width: 40%;
  margin-bottom: var(--margin-s);
  flex: 1 1 30%;
}

.form-item-car-group label img {
  width: 100%;
  height: 200px; /* Fixed height for images */
  object-fit: contain; /* or cover */
  border-radius: var(--br-xs);
}

/* Selected State */
.form-item-car-group:has(input:checked) {
  border: 2px solid var(--blue-light-2);
  background-color: var(--white-original);
  
  border-radius: var(--br-s);
  overflow: hidden;
  min-height: 300px;


  .car-group-title {
    color: var(--blue-light-1);
  }

  .category-overlay {
    font-weight: var(--fw-extrabold);
  }

  .car-group-image-wrapper img {
    width: 360px; 
    height: auto;

    filter: brightness(1.01);

  }

  .price-per-day {
      font-weight: var(--fw-bold);
      background-color: var(--accent-5);
      padding: var(--margin-xs) var(--margin-s);
      border-radius: var(--br-s);
      color: var(--blue-base);
    }

    
    .editorial-description {
      display: block;

      font-size: var(--fc-p);
      color: var(--c-black-transparent-1);
      text-align: left;
      line-height: 1.25;
      margin-top: var(--margin-s);
      padding-top: var(--margin-s); 
      border-top: 1px solid var(--grey-light-2);
    }
  
}

/* Price styling (appended by JS) */
.form-item-car-group .car-group-price {
  display: block;
  margin-top: var(--margin-s);
  padding-top: var(--margin-xs);
  border-top: 1px solid var(--grey-light-2);
  width: 100%;
  text-align: center;
  
  font-size: var(--fs-p1); /* Restore font size */
  color: var(--blue-base);
  font-weight: var(--fw-bold);
  order: 10;
}

/* ********************** */
/* Car Group Grid Layout */
/* ********************** */


.car-group-grid-item {
  display: grid;
  grid-template-areas:
    "image details pricing"
    "image details pricing"
    "image details action";
  grid-template-columns: 220px 1fr 1fr auto;
  gap: var(--margin-s);
  align-items: center;
  width: 100%;
  padding: 0;
  border-radius: var(--br-s);
  overflow: hidden;
}

.car-group-image-wrapper {
  grid-area: image;
  width: 100%;
  height: 100%;
  position: relative;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--br-s);
    aspect-ratio: 4 / 3;
  }
}

.category-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--blue-dark-1);
  color: var(--white);
  padding: var(--margin-xxs) var(--margin-s);
  font-family: var(--ff-sans2);
  font-weight: var(--fw-extrabold);
  font-size: var(--fc-h2);
  
  border-bottom-right-radius: var(--br-s);
  z-index: 10;
  line-height: 1;
  text-align: left;

  .title-prefix {
    font-size: var(--fc-p);
    font-weight: var(--fw-semibold);
    margin-right: var(--margin-xs);
    color: var(--grey-light-1);    
    display: none;
  }

  .car-category {
    font-size: var(--fc-h3);
    font-weight: var(--fw-semibold);
    font-family: var(--ff-sans1);
    color: var(--white);
    margin-left: var(--margin-s);

  }
}

.car-features-chips {
  display: none;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--margin-xs);
  margin-top: var(--margin-xs);
  padding-right: var(--margin-l);

  ul {
    list-style: none;
    margin: 0;
    padding: 0 ;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--margin-xs);
    border: 0;
    


    li {
      margin: 0;
      padding: 0;
      border: 0;
    }
  }
}

.chip {
  background-color: var(--grey-light-3);
  color: var(--grey-dark-2);
  padding: var(--margin-xs) var(--margin-m);
  border-radius: var(--br-m);
  border: 1px solid var(--grey-light-2);
  font-family: var(--ff-sans1);
  font-size: var(--fc-p);
  display: flex;
  flex-direction: row;  
  justify-content: flex-start;
  align-items: center;
  white-space: nowrap;
}

.chip::before {
  content: '';
  display: inline-block;
  width: var(--fs-p);
  height: var(--fs-p);
  
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: var(--margin-s);
  opacity: 0.6;
}

.chip.power::before {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116.27 109.06"><g id="Layer_1-2" data-name="Layer 1"><g><path d="M26.12,0l17.42,7.94c2.28-5.44,6.67.7,10.3,1.23,1.62-3.54,5.71-5.32,9.33-3.43l35.7,27.45c1.7,1.41,2.13,3.14,1.39,5.24l-21.93,34.44c-1,1.27-2.01,1.86-3.68,1.36l-26.84-18.89-5.32-25.4c.23-3.04,2.4-5.41,3.84-7.96-.04-.54-6.49-3.12-7.09-4.11-.84-1.37.41-2.13.61-3.41l-15.79-7.09H0V0h26.12ZM68.09,32.8l-13.64,10.58c.07,2.61-1.03,8.15.93,9.99,5.03,2.91,9.9,7.72,14.89,10.49,2.62,1.46,5.27,1,7.18-1.33l10.5-16.35-18.2-12.78c-.51-.27-1.03-.7-1.65-.6Z"/><path d="M97.09,49.87c-.23-.29,2.43-4.46,2.86-4.95.15-.18,0-.43.52-.37,2.95,1.41,5.49,3.81,6.72,6.89l9.09,41.97c-.46,21.86-32.99,20.49-30.61-1.99.68-6.4,5.39-17.81,4.21-23.56-.33-1.6-1.41-2.33-2.18-3.62l3.34-5.16c2.12,1.24,4.06,4.06,4.79,6.37,2.4,7.59-3.29,19.19-4.01,27.1-1.23,13.56,19.43,13.63,17.88-.25l-8.33-38c-.56-2.07-2.29-3.8-4.28-4.43Z"/><path d="M72.5,41.4l2.97,19.31c-1,2.37-3.72,1.82-4.87-.15l-2.59-16-5.45-3.99,3.97-3.1,5.96,3.93Z"/></g></g></svg>');
}

.chip.seats::before {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.69 117.44"><g id="Layer_1-2" data-name="Layer 1"><g><path d="M100.69,27.61c-.98,7.76-2.08,15.5-3.31,23.22-2.4,15.08-4.92,30.75-7.92,45.69-.04.18.13.61-.26.46-.14-.05-.12-.42-.26-.64-4.15-6.39-11.75-7.64-17.77-2.89h-.35c-5.13-4.52-5.87-11.82-4.63-18.21.35-1.78.96-3.62,1.54-5.34,3.66-10.78,8.61-21.41,12.36-32.19,1.65-4.43,7.62-10.09,12.54-10.09h8.06Z"/><path d="M0,117.44l4.29-14.28,54.66-.03c6.38-.51,9.58-3.31,14.13-7.05,7.23-5.95,15.96.54,13.94,9.41-.86,3.79-2.72,7.71-3.7,11.51l-.28.44H0Z"/><path d="M6.52,99.87v-4.07c0-2.24,2.18-6.08,3.8-7.61,5.01-4.73,11.41-3.68,17.66-3.17,11.77.97,23.54,2.27,35.32,3.26.62.26.9,1.7,1.26,2.36.99,1.84,2.34,3.61,3.89,4.99.14.7-3.48,2.41-4.16,2.69-1.97.81-3.94,1.28-6.06,1.54H6.52Z"/><path d="M100.69,24.35h-9.51c-11.19,0-8.75-19.39-2.02-23.21,1.95-1.11,6.07-1.9,7.64.03l3.89,23.19Z"/></g></g></svg>');
}

.chip.transmission::before {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.18 87.01"><g id="Layer_1-2" data-name="Layer 1"><path d="M14.54,64.35c4.26,1.57,7.54,4.69,8.23,9.32,1.78,11.97-13.55,18.21-20.44,8.74-4.82-6.61-1.65-15.51,6-17.82l.03-41.85C2.46,21.05-.8,15.44.17,9.39.6,6.65,3.14,3.22,5.54,1.86c9.29-5.31,19.7,2.88,16.94,13.15-.9,3.34-4.47,7.08-7.94,7.63v16.69h23.31l.26-.26v-16.43c-1.58-.16-3.28-1.3-4.47-2.32-5.31-4.54-5.11-13.02.27-17.46,7.7-6.35,18.75-.79,18.67,9.03-.04,5.18-3.67,9.4-8.44,11v16.17l.26.26h23.91l.26-.26v-16.43c-8.9-2.14-11.42-13.98-4.33-19.78,12.27-10.04,26.57,8.87,14.22,18.06-1.18.88-2.46,1.31-3.67,2.01l-.03,20.44c-.03.7-1.57,2.16-2.14,2.16h-28.47v18.84c3.31,1.18,6.11,3.48,7.54,6.73,3.16,7.14-2.15,15.49-9.86,15.9-10.6.56-16.25-12.65-8.28-19.89,1.42-1.29,2.91-1.88,4.58-2.74v-18.84H14.54v18.84ZM16.66,11.67c0-2.85-2.31-5.17-5.17-5.17s-5.17,2.31-5.17,5.17,2.31,5.17,5.17,5.17,5.17-2.31,5.17-5.17ZM46.33,11.66c0-2.85-2.31-5.17-5.17-5.17s-5.17,2.31-5.17,5.17,2.31,5.17,5.17,5.17,5.17-2.31,5.17-5.17ZM76.8,11.67c0-2.86-2.32-5.18-5.18-5.18s-5.18,2.32-5.18,5.18,2.32,5.18,5.18,5.18,5.18-2.32,5.18-5.18ZM16.64,75.54c0-2.83-2.3-5.13-5.13-5.13s-5.13,2.3-5.13,5.13,2.3,5.13,5.13,5.13,5.13-2.3,5.13-5.13ZM46.3,75.53c0-2.83-2.3-5.13-5.13-5.13s-5.13,2.3-5.13,5.13,2.3,5.13,5.13,5.13,5.13-2.3,5.13-5.13Z"/></g></svg>');
}

.chip.doors::before {
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.1 86.27"><g id="Layer_1-2" data-name="Layer 1"><path d="M0,31.87C40.49.71,58.3-.93,108.37.26c1.06,9.02.79,21.58.88,30.83l-12.01.67,3.11-26.25c-39.24-.2-56.25.83-88.57,25.02-1.23,2.74-1.41,6.04-2.43,8.92l100.32-4.32c4.61,16.24,4.56,48.3-17.22,51.15,0,0-92.44,0-92.44,0V31.87ZM95.4,47.85c-2.57.55-13.49-1.16-12.14,3.11.25,1.11,1.55,1.39,2.51,1.49,4.64.23,10.01.67,14.59.13,1.83-.42,2.71-2.64,1.33-4.03-1.2-1.22-4.6-.74-6.29-.7Z"/></g></svg>');
}

.car-group-details {
  grid-area: details;
  display: flex;
  flex-direction: column;
  gap: var(--margin-s);
}

.car-group-title {
  font-family: var(--ff-sans2);
  font-weight: var(--fw-extrabold);
  font-size: var(--fc-h2);
  color: var(--blue-dark-1);
  line-height: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--margin-xxs);

  .subtitle-suffix {
    font-family: var(--ff-sans1);
    font-weight: var(--fw-normal);
    font-size: var(--fc-p);
    color: var(--grey-dark-2);
    margin-left: var(--margin-xxs);
  }
}

.car-group-subtitle {
  font-family: var(--ff-sans1);
  font-weight: var(--fw-normal);
  font-size: var(--fc-small);
  color: var(--grey-dark-2);
  line-height: 1.2;
}

.editorial-description {
      display: none
}

.car-group-pricing {
  grid-area: pricing;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: var(--margin-xxs);
  text-align: right;

  margin-top: var(--margin-m);
}

.price-per-day {
  font-weight: var(--fw-bold);
  font-size: var(--fc-h3);
  color: var(--blue-light-2);
}

.price-total {
  font-size: var(--fc-p2);
  color: var(--blue-base);
}

.car-group-action {
  grid-area: action;
  padding: 0;
  display: none;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  
  .button {
    margin-bottom: 0;
    padding: var(--margin-xs) var(--margin-m);
    font-size: var(--fc-p);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    border-radius: var(--br-s);

    &.primary {
        background-color: var(--blue-light-1);
        color: var(--white);
        border: 1px solid var(--blue-light-2);
    }
  }
}

/* Global Expansion Logic (Desktop First) */
.form-item-car-group:has(input:checked) .car-features-chips,
.js-form-type-radio:has(input[name="car_group"]:checked) .car-features-chips,
.form-item-car-group input:checked + label .car-features-chips {
  display: flex !important;
}

.form-item-car-group:has(input:checked) .car-group-action,
.js-form-type-radio:has(input[name="car_group"]:checked) .car-group-action,
.form-item-car-group input:checked + label .car-group-action {
  display: flex !important;
  position: relative;
  z-index: 20; /* Ensure it's above the form-switch overlay */
}


@media all and (width <= 768px) {

  .webform-entity-radios--wrapper .js-webform-webform-entity-radios {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--margin-s);
}

  .form-item-car-group label {
    cursor: pointer;
    width: 100%;
    min-height: calc(60px + var(--margin-m) * 2);
    text-align: center;
    font-weight: var(--fw-semibold);
    color: var(--blue-dark-1);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--margin-m);
}

.wheelsys-price-container {
  width: 100%;
}


  .form-item-car-group:has(input:checked) .car-group-grid-item,
  .form-item-car-group input:checked + label .car-group-grid-item {

    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--margin-xs);

    grid-template-areas:
      none;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: var(--margin-s);

  }

  .form-item-car-group .car-group-grid-item {

    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: stretch;
    gap: var(--margin-xs);

    grid-template-areas:
      none;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: var(--margin-s);

  }



  .category-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: fit-content;
      background-color: var(--blue-base);
      color: var(--white);
      padding: var(--margin-xs) var(--margin-s);
      font-family: var(--ff-sans2);
      font-weight: var(--fw-extrabold);
      font-size: var(--fc-p2);
      border-top-left-radius: var(--br-s);
      border-bottom-right-radius: var(--br-s);
      z-index: 10;
      line-height: 1;
      text-align: left;

      .title-prefix {
        font-size: var(--fc-small);
        font-weight: var(--fw-semibold);
        margin-right: var(--margin-xs);
        color: var(--white);
        display: none;
      }

      .car-category {
        font-size: var(--fc-p);
        font-weight: var(--fw-semibold);
        font-family: var(--ff-sans1);
        color: var(--white);
        margin-left: var(--margin-s);

      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--br-s);
      }
    }

  .car-group-image-wrapper {
  width: 160px;
    height: 80px;
  
  position: relative;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;

  flex: 1 1 180px;
  
  img, figure, picture {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 0;
    aspect-ratio: 1;
  }
}

.car-group-details {
  grid-area: details;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--margin-s);

    width: 100%;
    flex: 1 1 100%;

}

.car-group-title {
  font-family: var(--ff-display1);
  font-weight: var(--fw-bold);
  font-size: var(--fc-h3);
  color: var(--blue-dark-1);
  line-height: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--margin-xxs);

  .subtitle-suffix {
    font-family: var(--ff-sans1);
    font-weight: var(--fw-normal);
    font-size: var(--fc-small2);
    color: var(--grey-dark-2);
    margin-left: var(--margin-xxs);
  }
}

.car-group-subtitle {
  font-family: var(--ff-sans1);
  font-weight: var(--fw-normal);
  font-size: var(--fc-small);
  color: var(--grey-dark-2);
  line-height: 1.2;
}

.car-features-chips {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: var(--margin-xxs);
    margin-top: var(--margin-xxs);

    display: none;
}

  .editorial-description {
    width: 96%;
    margin: 0 auto;
    padding: var(--margin-m);
  }

  .car-group-pricing {
    align-items: center;
    text-align: center;

    flex: 1 1 160px;
    margin-left: auto;
  }

  .price-per-day {
  font-weight: var(--fw-bold);
  font-size: var(--fc-p2);
  color: var(--blue-light-2);
}

.price-total {
  font-size: var(--fc-small);
  color: var(--blue-base);
  line-height: 1;

}


  .car-group-action {
  
  padding: 0;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  position: absolute;
  bottom: 0;
  top: auto;
  right: 0;
  z-index: 10;

  
  .button {
    margin-bottom: 0;
    padding: var(--margin-xs) var(--margin-xs);
    font-size: var(--fc-p);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    border-radius: var(--br-s);

    &.primary {
        background-color: var(--accent-2);
        color: var(--blue-dark-1);
        border: 1px solid var(--accent-3);
    }
  }
  }


  /* ***************************** */
  /*  Selected State  on mobile   */
  /* ************************* */


  .form-item-car-group:has(input:checked) {
    border: 3px solid var(--blue-base);
    background-color: var(--white-original);
    
    border-radius: var(--br-m);
    

    .car-group-title {
  font-family: var(--ff-display1);
  font-weight: var(--fw-bold);
  font-size: var(--fc-h1);
  color: var(--blue-base);
  line-height: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--margin-xxs);

  width: 100%;

    .subtitle-suffix {
      font-family: var(--ff-sans1);
      font-weight: var(--fw-normal);
      font-size: var(--fc-small2);
      color: var(--grey-dark-2);
      margin-left: var(--margin-xxs);
    }
  }

   .car-group-image-wrapper {
    width: 160px;
      height: 160px;
      aspect-ratio: 1;
    
    position: relative;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;

    flex: 1 1 100%;
    
    img, figure, picture {
      width: 160px;
      height: 160px;
      object-fit: cover;
      border-radius: 0;
      aspect-ratio: 1;
    }
  }
    
    /* Reveal the action buttons and chips when selected, on mobile */
    .car-features-chips {
      display: flex;
    }
  
    .car-group-action {
      display: flex;
      position: relative;
      width: 100%;
      margin-top: var(--margin-s);
      justify-content: center;
      bottom: auto; 
      right: auto;
    }
    
    .button {
        opacity: 1; 
        pointer-events: auto;
        width: 100%;
    }


    .category-overlay {
      background-color: var(--blue-base);
      color: var(--white);
      font-weight: var(--fw-extrabold);

      .title-prefix {
        color: var(--white);
      }
    }

    .car-group-image-wrapper img {
      width: 100%; 
      height: 100%;
      filter: saturate(3) brightness(1.1);

    }

    .price-per-day {
      font-weight: var(--fw-bold);
      background-color: var(--accent-5);
      padding: var(--margin-xs) var(--margin-s);
      border-radius: var(--br-s);
      color: var(--blue-base);
    }


  }


  .car-group-action {
    padding: 0;
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    margin: var(--margin-m);
    width: 90%;

    position: absolute;
    top: auto;
    right: 0;
    z-index: 10;

  }


}

/* ******************************* */
/* *** SKELETON LOADER *** */