@import url('./components.css');

/* T06R: the accepted promotion and booking action remain visible while reading. */
.mama-service-rail {
  box-sizing: border-box;
  display: block;
  align-self: stretch;
  min-width: 0;
  height: 100%;
  color: var(--mama-color-text);
  font-family: var(--mama-font-sans);
}
.mama-service-rail__sticky {
  position: sticky;
  top: var(--mama-service-rail-top, 0px);
  z-index: 2;
  box-sizing: border-box;
  margin-bottom: 16px;
  border: 1px solid var(--mama-color-border);
  border-radius: var(--mama-radius-lg);
  background: var(--mama-color-action);
}
.mama-service-rail__sticky-inner { padding: 22px; }
.mama-service-rail__sticky h3 { margin: 8px 0 16px; color: var(--mama-color-text); font: 600 21px/1.25 var(--mama-font-sans); }
.mama-service-rail__sticky p { margin: 0 0 16px; font: 400 14px/1.5 var(--mama-font-sans); }
.mama-service-rail__sticky .mama-button { display: flex; width: 100%; background: var(--mama-color-surface); }
.mama-service-rail__card { box-sizing: border-box; margin-bottom: 16px; padding: 20px; border: 1px solid var(--mama-color-border); border-radius: var(--mama-radius-lg); background: var(--mama-color-surface); }
.mama-service-rail__card h3 { margin: 0 0 14px; font: 600 19px/1.3 var(--mama-font-sans); }
.mama-service-rail__card :where(p, a) { font: 400 14px/1.5 var(--mama-font-sans); }
.mama-service-rail__card a { color: var(--mama-color-link); }
.mama-service-rail__card p { margin: 10px 0 0; }
@media (max-width: 991px) {
  .mama-service-rail { height: auto; }
  .mama-service-rail__sticky { position: static; }
}
