/* OttoCare ROADSIDE module — every rule scoped to .oc-roadside. Moved from rewards_review_3.html (assist-modal). */
.oc-roadside, .oc-roadside * { box-sizing: border-box; }

.oc-roadside {
  position: absolute;          /* covers .oc-phone; roadside.js switches to fixed when there is no phone */
  inset: 0;
  z-index: 5100;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
}
.oc-roadside[hidden] { display: none; }
/* after "See full coverage details": the pop-up stays where it was and grows downward */
.oc-roadside.pinned { align-items: flex-start; }
.oc-roadside.pinned .oc-roadside-modal { max-height: calc(100% - 20px - var(--pin-top, 0px)); animation: none; }

.oc-roadside-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  animation: oc-roadside-fade 0.25s ease;
}

.oc-roadside-modal {
  position: relative;
  width: min(86%, 320px);
  padding: 30px 22px 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: #1a1a1a;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  animation: oc-roadside-pop 0.25s ease;
}

@keyframes oc-roadside-fade { from { opacity: 0; } }
@keyframes oc-roadside-pop { from { opacity: 0; transform: scale(0.92); } }

.oc-roadside-state[hidden] { display: none; }

.oc-roadside-message {
  min-height: 54px;
  padding: 0 22px;             /* clear of the close button */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Serif Display', serif;
  font-size: 21px;
  line-height: 1.3;
  transition: color 0.3s ease, opacity 0.6s ease;
}
.oc-roadside-message.tone-red { color: #e05c5c; }
.oc-roadside-message.tone-yellow { color: #e0c15c; }
.oc-roadside-message.tone-white { color: #fff; }

.oc-roadside-sub {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.oc-roadside-sub[hidden] { display: none; }

.oc-roadside-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.oc-roadside-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: #c9a84c;
  color: #141414;
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
}
.oc-roadside-call:hover { background: #d4b85a; }

/* call-the-shop under the roadside number on the expired / not-covered messages */
.oc-roadside-call.secondary {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
}
.oc-roadside-call.secondary:hover { background: rgba(255, 255, 255, 0.08); }
.oc-roadside-call.secondary:disabled { background: transparent; }

.oc-roadside-paid {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #e0c15c;
}
.oc-roadside-call:disabled { opacity: 0.55; cursor: default; background: #c9a84c; }

.oc-roadside-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  cursor: pointer;
}

.oc-roadside-note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

/* the short version: four lines under the call button */
.oc-roadside-points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}
.oc-roadside-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}
.oc-roadside-points [hidden] { display: none; }
.oc-roadside-points b { color: #fff; white-space: nowrap; }

.oc-roadside-points i {
  flex: 0 0 16px;
  margin-top: 2px;
  text-align: center;
  font-size: 12px;
  color: #c9a84c;
}

.oc-roadside-more {
  margin-top: 16px;
  padding: 4px 0;
  border: none;
  background: none;
  color: #c9a84c;
  font: 700 12px 'DM Sans', sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.oc-roadside-more i { margin-left: 4px; font-size: 10px; transition: transform 0.2s ease; }
.oc-roadside-more[aria-expanded="true"] i { transform: rotate(180deg); }

/* the long version */
.oc-roadside-details {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.oc-roadside-details[hidden] { display: none; }
.oc-roadside-details h4 {
  margin: 14px 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9a84c;
}
.oc-roadside-details h4:first-child { margin-top: 0; }
.oc-roadside-details p { margin: 0; }
.oc-roadside-details ul { margin: 0; padding-left: 16px; }
.oc-roadside-details li { margin: 3px 0; }
.oc-roadside-details b { color: rgba(255, 255, 255, 0.9); }

/* the pop-up never grows past the screen: the headline and call button stay put, the rest scrolls */
.oc-roadside-modal {
  max-height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
}
.oc-roadside-state:not([hidden]) {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.oc-roadside-state > .oc-roadside-message,
.oc-roadside-state > .oc-roadside-actions { flex: 0 0 auto; }

/* thin overlay-style scrollbar that doesn't take width from the text */
.oc-roadside-scroll {
  min-height: 0;
  margin-right: -14px;
  padding-right: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 168, 76, 0.55) transparent;
}
.oc-roadside-scroll::-webkit-scrollbar { width: 4px; }
.oc-roadside-scroll::-webkit-scrollbar-track { background: transparent; }
.oc-roadside-scroll::-webkit-scrollbar-thumb { background: rgba(201, 168, 76, 0.55); border-radius: 4px; }

/* the call button's number never wraps */
.oc-roadside-call { white-space: nowrap; }