/* OttoCare VEHICLES module — every rule scoped to .oc-vehicles (card) or .oc-vehicles-modal (nickname dialog).
 * Moved from rewards_review_3.html lines 1050-1601. Colors are the DEFAULT scheme that page applied by script. */
.oc-vehicles, .oc-vehicles *, .oc-vehicles-modal, .oc-vehicles-modal * { box-sizing: border-box; }

.oc-vehicles {
  --hero-vehicle-accent: #d8c7ff;
  --hero-vehicle-bg: linear-gradient(145deg,
      color-mix(in srgb, #1b232d 32%, transparent) 0%,
      color-mix(in srgb, #1b232d 20%, transparent) 60%,
      color-mix(in srgb, black 8%, transparent) 100%);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  text-align: left;
}

.oc-vehicles button { font-family: 'DM Sans', sans-serif; }

.oc-vehicles.hero-vehicle-card {
  width: min(100%, 370px);
  padding: 18px;
  margin-top: -18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  background: var(--hero-vehicle-bg);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

/* 3 rows × 2 columns; view.php fills the slots in order (row 1 left, row 1 right, row 2 left …) */
.oc-vehicles .hero-vehicle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 14px;
}

.oc-vehicles .hero-slot {
  min-width: 0;
  display: flex;
  align-items: center;
}

/* a label or arrows in the right column hug the right edge */
/* counts slots only, so the full-width reminder bar between rows doesn't shift left/right */
.oc-vehicles .hero-slot:nth-child(even of .hero-slot) { justify-content: flex-end; }

.oc-vehicles .hero-slot-cards {
  flex-direction: column;
  align-items: stretch;
}

.oc-vehicles .hero-slot-cards .hero-vehicle-viewport { flex: 1; }

.oc-vehicles .hero-slot-button { align-items: stretch; }

.oc-vehicles .hero-vehicle-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.oc-vehicles .hero-vehicle-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.oc-vehicles .hero-vehicle-nav[hidden] {
  display: none;
}

.oc-vehicles .hero-vehicle-nav-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--hero-vehicle-accent) 38%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--hero-vehicle-accent) 14%, transparent);
  color: var(--hero-vehicle-accent);
  font-size: 11px;
  cursor: pointer;
}

.oc-vehicles .hero-vehicle-nav-btn:hover {
  background: color-mix(in srgb, var(--hero-vehicle-accent) 24%, transparent);
}

.oc-vehicles .hero-vehicle-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.oc-vehicles .hero-vehicle-nav-count {
  min-width: 34px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
}

.oc-vehicles .hero-vehicle-viewport {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.oc-vehicles .hero-vehicle-viewport::-webkit-scrollbar {
  display: none;
}

.oc-vehicles .hero-vehicle-track {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.oc-vehicles .hero-vehicle-slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.oc-vehicles .hero-vehicle-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.oc-vehicles .hero-vehicle-dots[hidden] {
  display: none;
}

.oc-vehicles .hero-vehicle-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.26);
  cursor: pointer;
}

.oc-vehicles .hero-vehicle-dot.active {
  width: 16px;
  border-radius: 3px;
  background: var(--hero-vehicle-accent);
}

.oc-vehicles .hero-vehicle-icon {
  border: 1px solid color-mix(in srgb, var(--hero-vehicle-accent) 38%, transparent);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--hero-vehicle-accent) 14%, transparent);
  color: var(--hero-vehicle-accent);
  font: 700 10px 'DM Sans', sans-serif;
  cursor: pointer;
  text-align: left;
}

.oc-vehicles .hero-vehicle-icon-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 3px;
}

.oc-vehicles .hero-vehicle-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.oc-vehicles .hero-vehicle-icon i {
  font-size: 26px;
  flex-shrink: 0;
  color: var(--vehicle-health-color, currentColor);
}

.oc-vehicles .hero-vehicle-icon-text {
  margin-top: auto;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.05;
  text-align: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 6px;
}

.oc-vehicles .hero-vehicle-icon:hover {
  background: color-mix(in srgb, var(--hero-vehicle-accent) 22%, transparent);
}

.oc-vehicles .hero-vehicle-icon:hover .hero-vehicle-make, .oc-vehicles .hero-vehicle-icon:hover .hero-vehicle-model {
  color: var(--hero-vehicle-accent);
}

.oc-vehicles .hero-vehicle-year {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  line-height: 1.1;
}

.oc-vehicles .hero-vehicle-year-make {
  display: contents;
  line-height: 1.1;
}

.oc-vehicles .hero-vehicle-make-inline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.oc-vehicles .hero-vehicle-make-model {
  display: contents;
}

.oc-vehicles .hero-vehicle-make, .oc-vehicles .hero-vehicle-model {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
}

.oc-vehicles .hero-vehicle-make {
  color: rgba(255, 255, 255, 0.48);
}

.oc-vehicles .hero-vehicle-model {
  color: #fff;
}

.oc-vehicles .hero-vehicle-nickname {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: #e7c14b;
  cursor: pointer;
}

.oc-vehicles .hero-vehicle-nickname-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* edit pencil after a nickname */
.oc-vehicles .hero-vehicle-icon .hero-vehicle-nickname i {
  flex-shrink: 0;
  font-size: 10px;
  color: currentColor;
  opacity: 0.7;
}

.oc-vehicles .hero-vehicle-nickname:hover i { opacity: 1; }

.oc-vehicles .hero-vehicle-nickname-add {
  align-self: flex-start;
  margin-top: 2px;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  font: 600 10px 'DM Sans', sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.oc-vehicles .hero-vehicle-nickname-add:hover {
  border-color: #e7c14b;
  color: #e7c14b;
}

.oc-vehicles-modal.vehicle-nickname-modal {
  position: absolute;
  inset: 0;
  z-index: 4200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.oc-vehicles-modal.vehicle-nickname-modal[hidden] {
  display: none;
}

.oc-vehicles-modal .vehicle-nickname-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 20, 0.72);
}

.oc-vehicles-modal .vehicle-nickname-dialog {
  position: relative;
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: #131a2c;
  font-family: 'DM Sans', sans-serif;
  color: #fff;
}

.oc-vehicles-modal .vehicle-nickname-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.oc-vehicles-modal .vehicle-nickname-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: 600 13px 'DM Sans', sans-serif;
}

.oc-vehicles-modal .vehicle-nickname-error {
  font-size: 11px;
  color: #ff7a6b;
}

.oc-vehicles-modal .vehicle-nickname-error[hidden] {
  display: none;
}

.oc-vehicles-modal .vehicle-nickname-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.oc-vehicles-modal .vehicle-nickname-btn {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font: 700 11px 'DM Sans', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.oc-vehicles-modal .vehicle-nickname-btn.primary {
  border-color: #e7c14b;
  background: rgba(231, 193, 75, 0.18);
  color: #e7c14b;
}

.oc-vehicles-modal .vehicle-nickname-btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

.oc-vehicles .hero-vehicle-ownership {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(201, 168, 76, 0.38);
  border-radius: 14px;
  background: rgba(201, 168, 76, 0.14);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
}

.oc-vehicles .hero-vehicle-ownership-text {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  color: rgba(255, 255, 255, 0.86);
}

.oc-vehicles .hero-vehicle-ownership-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.oc-vehicles .hero-vehicle-ownership-btn {
  padding: 4px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 700 11px 'DM Sans', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.oc-vehicles .hero-vehicle-ownership-btn.yes {
  border-color: #4ad06a;
  background: rgba(74, 208, 106, 0.16);
  color: #4ad06a;
}

.oc-vehicles .hero-vehicle-ownership-btn.neutral {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
}

.oc-vehicles .hero-vehicle-ownership-btn.no {
  border-color: #d94040;
  background: rgba(217, 64, 64, 0.16);
  color: #ff7a6b;
}

.oc-vehicles .hero-health-ring {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(201, 168, 76, 0.38);
  border-radius: 14px;
  background: rgba(201, 168, 76, 0.14);
  color: #fff;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}

.oc-vehicles .hero-health-ring:hover {
  background: rgba(201, 168, 76, 0.22);
}

.oc-vehicles .hero-health-gauge {
  width: 80px;
  height: 40px;
  position: relative;
  display: block;
}

.oc-vehicles .hero-health-gauge svg {
  width: 80px;
  height: 40px;
  display: block;
  overflow: visible;
}

.oc-vehicles .hero-health-gauge-track, .oc-vehicles .hero-health-gauge-fill {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}

.oc-vehicles .hero-health-gauge-track {
  stroke: rgba(255, 255, 255, 0.22);
}

.oc-vehicles .hero-health-gauge-fill {
  stroke: var(--health-gauge-gradient, var(--health-color, #5d8eff));
  stroke-dasharray: var(--health-percent, 0) 100;
  filter: drop-shadow(0 0 10px var(--health-glow, rgba(93, 142, 255, 0.35)));
}

.oc-vehicles .hero-health-gauge-tick {
  stroke: rgba(13, 17, 23, 0.55);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.oc-vehicles .hero-health-score-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.oc-vehicles .hero-health-label {
  width: 100%;
  margin-top: auto;
  color: rgba(255, 255, 255, 0.86);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 6px;
}

.oc-vehicles .hero-health-status {
  width: 100%;
  color: #c9a84c;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}


.oc-vehicles .hero-appointment-reminder {
  display: none;
  grid-column: 1 / -1;          /* full width inside the grid */
  width: 100%;
  min-height: 44px;
  margin-top: 0;
  padding: 12px 14px;
  border: 1px solid #EF9F27;
  border-radius: 11px;
  background: #EF9F27;
  color: #141414;
  font: 700 12px/1.25 'DM Sans', sans-serif;
  text-align: center;
}

.oc-vehicles .hero-appointment-reminder.visible {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oc-vehicles .hero-appointment-text span { white-space: pre-line; }   /* the message's line breaks show */

.oc-vehicles .hero-appointment-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.oc-vehicles .hero-appointment-buttons {
  display: flex;
  gap: 10px;
}

.oc-vehicles .hero-appointment-btn {
  flex: 1;
  min-height: 36px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font: 700 12px 'DM Sans', sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.oc-vehicles .hero-appointment-btn.reschedule { background: #1f9d55; }
.oc-vehicles .hero-appointment-btn.cancel { background: #c0392b; }
.oc-vehicles .hero-appointment-btn:hover { filter: brightness(1.1); }

.oc-vehicles .hero-appointment-reminder i {
  flex-shrink: 0;
  color: #141414;
  font-size: 16px;
}

.oc-vehicles .hero-vehicle-action {
  flex: 1;
  min-height: 42px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9px;
  background: #9E3F35;
  color: #fff;
  font: 600 11px 'DM Sans', sans-serif;
  cursor: pointer;
}

.oc-vehicles .hero-vehicle-action.primary {
  background: #c9a84c;
  border-color: #c9a84c;
  color: #141414;
}

.oc-vehicles .hero-vehicle-action:hover {
  filter: brightness(1.1);
}

.oc-vehicles .hero-roadside-text {
  display: inline-block;
  transition: opacity 0.6s ease;
}

.oc-vehicles .hero-vehicle-viewport { scrollbar-width: none; }

/* "Remove this vehicle?" dialog (parts/remove-dialog.php) — reuses the nickname dialog frame */
.oc-vehicles-modal .vehicle-remove-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--hero-vehicle-accent, #d8c7ff);
}

.oc-vehicles-modal .vehicle-remove-text {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}

.oc-vehicles-modal .vehicle-nickname-btn[hidden] { display: none; }

/* Remove sits on the left, away from Save */
.oc-vehicles-modal .vehicle-nickname-remove { margin-right: auto; }

.oc-vehicles-modal .vehicle-nickname-btn.danger {
  border-color: #d94040;
  background: rgba(217, 64, 64, 0.16);
  color: #ff7a6b;
}