/**
 * @file
 * Young Driver Filter Styles.
 *
 * Provides visual feedback and styling for the young driver filtering feature.
 */

/* Age Checkbox Container - highlight when in young driver mode */
.form-item:has(input[name="driver_age_25_plus"]),
.js-form-item:has(input[name="driver_age_25_plus"]) {
  width: 100%;
  flex: 1 1 100%;
}

.form-item.young-driver-mode,
.js-form-item.young-driver-mode {
  background-color: var(--amber-light, #fff8e1);
  border-color: var(--amber, #ffc107);
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}

.form-item:has(input[name="driver_age_25_plus"]) label,
.js-form-item:has(input[name="driver_age_25_plus"]) label {

  cursor: pointer;
}

.form-item.young-driver-mode label,
.js-form-item.young-driver-mode label {
  color: var(--amber-dark, #ff8f00);
}

/* Notice Banner - positioned under webform-progress */
.young-driver-notice {
  display: none;
  width: 100%;
  margin: var(--margin-m) 0;
  padding: var(--margin-m) var(--margin-l);
  background: linear-gradient(135deg, var(--amber-light, #fff8e1) 0%, var(--amber-lighter, #fffde7) 100%);
  border-left: 4px solid var(--amber, #ffc107);
  border-radius: var(--br-m);
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
  animation: slideDown 0.3s ease-out;
  position: relative;
  z-index: 10;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.young-driver-notice-content {
  display: flex;
  align-items: flex-start;
  gap: var(--margin-m);
}

.young-driver-notice .notice-icon {
  font-size: var(--fc-h2, 1.5rem);
  line-height: 1;
  flex-shrink: 0;
}

.young-driver-notice .notice-text {
  flex: 1;
  min-width: 0;
}

.young-driver-notice .notice-text strong {
  display: block;
  font-size: var(--fc-h4, 1.125rem);
  font-weight: var(--fw-bold, 700);
  color: var(--amber-dark, #ff8f00);
  margin-bottom: var(--margin-xs);
  line-height: 1.3;
}

.young-driver-notice .notice-text p {
  font-size: var(--fc-p, 1rem);
  color: var(--grey-dark-2, #424242);
  margin: 0;
  line-height: 1.5;
}

/* Hidden Car Items */
.view-car-types-list > ul > li.hidden-young-driver,
.view-car-groups-catalog > ul > li.hidden-young-driver {
  display: none !important;
}

/* Accessible hidden attribute support */
.view-car-types-list > ul > li[hidden],
.view-car-groups-catalog > ul > li[hidden] {
  display: none !important;
}

/* Visual indicator badge on suitable cars when filter is active */
.young-driver-notice:not(:empty) ~ .view-car-types-list > ul > li:not(.hidden-young-driver):not([hidden]),
.young-driver-notice:not(:empty) ~ .view-car-groups-catalog > ul > li:not(.hidden-young-driver):not([hidden]) {
  position: relative;
}

.young-driver-notice:not(:empty) ~ .view-car-types-list > ul > li:not(.hidden-young-driver):not([hidden])::before,
.young-driver-notice:not(:empty) ~ .view-car-groups-catalog > ul > li:not(.hidden-young-driver):not([hidden])::before {
  content: "✓ Adatto a giovani conducenti";
  position: absolute;
  top: var(--margin-m);
  right: var(--margin-m);
  background-color: var(--green, #4caf50);
  color: var(--white);
  padding: var(--margin-xxs) var(--margin-s);
  border-radius: var(--br-s);
  font-size: var(--fc-small, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  line-height: 1.2;
  text-align: center;
}

/* English version */
html[lang="en"] .young-driver-notice:not(:empty) ~ .view-car-types-list > ul > li:not(.hidden-young-driver):not([hidden])::before,
html[lang="en"] .young-driver-notice:not(:empty) ~ .view-car-groups-catalog > ul > li:not(.hidden-young-driver):not([hidden])::before {
  content: "✓ Suitable for young drivers";
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .young-driver-notice {
    padding: var(--margin-m);
  }
  
  .young-driver-notice-content {
    flex-direction: column;
    gap: var(--margin-s);
  }
  
  .young-driver-notice:not(:empty) ~ .view-car-types-list > ul > li:not(.hidden-young-driver):not([hidden])::before,
  .young-driver-notice:not(:empty) ~ .view-car-groups-catalog > ul > li:not(.hidden-young-driver):not([hidden])::before {
    font-size: var(--fc-small, 0.875rem);
    padding: var(--margin-xxs) var(--margin-xs);
    top: var(--margin-s);
    right: var(--margin-s);
  }
}

/* Print styles - hide filter-specific UI */
@media print {
  .young-driver-notice,
  .form-item:has(input[name="driver_age_25_plus"]),
  .js-form-item:has(input[name="driver_age_25_plus"]) {
    display: none !important;
  }
  
  .view-car-types-list > ul > li:not(.hidden-young-driver):not([hidden])::before,
  .view-car-groups-catalog > ul > li:not(.hidden-young-driver):not([hidden])::before {
    display: none !important;
  }
}