/* OttoCare APPOINTMENT module — every rule scoped to .oc-appt. Look moved from rewards_review_3.html (#appointment-page). */
.oc-appt, .oc-appt * { box-sizing: border-box; }

.oc-appt {
  position: absolute;          /* covers .oc-phone; appointment.js switches to fixed when there is no phone */
  inset: 0;
  z-index: 4000;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 60px;
  background: #0d1117;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
}
.oc-appt[hidden] { display: none; }
.oc-appt::-webkit-scrollbar { display: none; }
.oc-appt [hidden] { display: none !important; }

.oc-appt-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 22px 16px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 75%, transparent 100%);
}
.oc-appt-back {
  position: absolute;
  left: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.oc-appt-back:hover { background: rgba(255, 255, 255, 0.18); }
.oc-appt-title { font-family: 'DM Serif Display', serif; font-size: 18px; }

.oc-appt-content { padding: 4px 14px 0; }
.oc-appt-shell {
  padding: 18px;
  border: 1px solid #2d333b;
  border-radius: 18px;
  background: #0d1117;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.oc-appt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oc-appt-group { margin-bottom: 16px; }
.oc-appt-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.oc-appt-label .req { color: #ef9f27; }

.oc-appt-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #2d333b;
  border-radius: 6px;
  background: #161b22;
  color: #fff;
  font: 14px 'DM Sans', sans-serif;
}
.oc-appt-input:focus { outline: none; border-color: #ef9f27; }
.oc-appt-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.oc-appt-input.invalid { border-color: #ff6b6b; }
.oc-appt textarea.oc-appt-input { resize: none; }
.oc-appt select.oc-appt-input option { background: #0d1117; color: #fff; }

.oc-appt-vehicles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.oc-appt-vehicle {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  padding: 10px;
  border: 1px solid #2d333b;
  border-radius: 6px;
  background: #161b22;
  color: rgba(255, 255, 255, 0.85);
  font: 12px/1.3 'DM Sans', sans-serif;
  text-align: center;
  cursor: pointer;
}
.oc-appt-vehicle small { display: block; color: #e7c14b; font-weight: 700; }
.oc-appt-vehicle:hover { border-color: #ef9f27; }
.oc-appt-vehicle.selected { border-color: #ef9f27; background: rgba(239, 159, 39, 0.12); color: #fff; }
.oc-appt-empty { width: 100%; padding: 10px; font-size: 13px; text-align: center; color: rgba(255, 255, 255, 0.6); }

.oc-appt-new-vehicle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 6px;
  background: rgba(45, 51, 59, 0.3);
}
.oc-appt-new-vehicle .oc-appt-group { margin-bottom: 0; }
.oc-appt-new-vehicle .span { grid-column: 1 / -1; }

.oc-appt-summary {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(239, 159, 39, 0.08);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}
.oc-appt-summary b { color: #fff; }
.oc-appt-notes { color: rgba(255, 255, 255, 0.6); font-size: 12px; }

.oc-appt-month { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 600; }
.oc-appt-month button {
  width: 34px;
  height: 30px;
  border: 1px solid #2d333b;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}
.oc-appt-month button:hover:not(:disabled) { border-color: #ef9f27; }
.oc-appt-month button:disabled { opacity: 0.3; cursor: default; }

.oc-appt-weekdays, .oc-appt-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.oc-appt-weekdays { margin-bottom: 5px; font-size: 12px; font-weight: 600; text-align: center; color: rgba(255, 255, 255, 0.6); }
.oc-appt-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px dashed #2d333b;
  border-radius: 6px;
  background: rgba(22, 27, 34, 0.45);
  color: rgba(255, 255, 255, 0.22);
  font: 13px 'DM Sans', sans-serif;
  cursor: default;
}
.oc-appt-day.outside { visibility: hidden; }
.oc-appt-day.open {
  border: 1px solid rgba(239, 159, 39, 0.45);
  background: #161b22;
  color: #fff;
  cursor: pointer;
}
.oc-appt-day.open:hover { background: rgba(239, 159, 39, 0.1); }
.oc-appt-day.selected { border-color: #ef9f27; background: #ef9f27; color: #000; font-weight: 700; }
.oc-appt-cal-status { min-height: 18px; margin: 10px 0 14px; font-size: 13px; color: rgba(255, 255, 255, 0.65); }

.oc-appt-times-title { margin-bottom: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.oc-appt-tz { margin-left: 4px; color: rgba(255, 255, 255, 0.45); }
.oc-appt-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.oc-appt-time {
  padding: 10px 4px;
  border: 1px solid #2d333b;
  border-radius: 6px;
  background: #161b22;
  color: rgba(255, 255, 255, 0.85);
  font: 12px 'DM Sans', sans-serif;
  cursor: pointer;
}
.oc-appt-time:hover { border-color: #ef9f27; }
.oc-appt-time.selected { border-color: #ef9f27; background: #ef9f27; color: #000; font-weight: 700; }

.oc-appt-buttons { display: flex; gap: 10px; margin-top: 22px; }
.oc-appt-btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font: 600 14px 'DM Sans', sans-serif;
  cursor: pointer;
}
.oc-appt-btn.wide { width: 100%; flex: none; padding: 10px; font-size: 13px; }
.oc-appt-btn.secondary { border: 1px solid #2d333b; background: transparent; color: rgba(255, 255, 255, 0.85); }
.oc-appt-btn.secondary:hover { border-color: rgba(255, 255, 255, 0.85); }
.oc-appt-btn.primary { background: #ef9f27; color: #000; }
.oc-appt-btn.primary:hover { background: #f0b444; }
.oc-appt-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.oc-appt-status:empty { display: none; }
.oc-appt-status {
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
}
.oc-appt-status.error { border: 1px solid rgba(255, 0, 0, 0.3); background: rgba(255, 0, 0, 0.1); color: #ff8b8b; }
.oc-appt-status.success { border: 1px solid rgba(29, 158, 117, 0.35); background: rgba(29, 158, 117, 0.12); color: #3fd09f; }
.oc-appt-status.info { border: 1px solid rgba(239, 159, 39, 0.35); background: rgba(239, 159, 39, 0.1); color: #f3c06d; }
.oc-appt-status a { color: inherit; font-weight: 700; }

/* cancel pop-up: sits over the whole app, gone after 3 seconds */
.oc-appt-popup {
  position: absolute;
  inset: 0;
  z-index: 5300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  font-family: 'DM Sans', sans-serif;
  animation: oc-appt-fade 0.2s ease;
}
.oc-appt-popup[hidden] { display: none; }
.oc-appt-popup-box {
  width: min(100%, 300px);
  padding: 24px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: #1a1a1a;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
}
.oc-appt-popup-box i { margin-bottom: 12px; font-size: 26px; color: #e05c5c; }
.oc-appt-popup-text { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.85); }
.oc-appt-popup-text b { color: #fff; }
@keyframes oc-appt-fade { from { opacity: 0; } }