:root {
  --subrun-primary: #006d77;
  --subrun-accent: #F2A900;
  --subrun-bg: #F6F5F1;
}

.subrunShell {
  background: var(--subrun-bg);
  min-height: 100%;
}

/*
  Largura responsiva de verdade (100% + teto), em vez de width fixo em rem,
  que cortava em telas de celular estreitas (~360px). Reaproveitado nos
  campos da etapa 1 e nos painéis de Payment/Success/Failure/ErrorPage.
*/
.subrunFormWidth {
  width: 100%;
  max-width: 20rem;
}

.subrunPanelWidth {
  width: 100%;
  max-width: 24rem;
}

.subrunShirtSizeList {
  width: 100%;
  max-width: 20rem;
}

/* .subrunShirtImg {
  width: 8rem;
  height: auto;
  align-self: center;
} */

.homeImage {
    width: 100%;
    max-width: 600px;
    /* height: auto; */
    /* display: block; */
    border-radius: 12px;
}

.subrunHeader {
  background: var(--subrun-primary);
  color: #fff;
  padding: 1rem 1.5rem;
}

/* Cabeçalho nativo das páginas (sap.m.Page) */
.subrunShell .sapMPageHeader,
.subrunShell .sapMPageHeader .sapMIBar {
  background-color: var(--subrun-primary);
}

.subrunShell .sapMPageHeader .sapMTitle,
.subrunShell .sapMPageHeader .sapMTitle .sapUiSelectable,
.subrunShell .sapMPageHeader .sapMBarChild,
.subrunShell .sapMPageHeader .sapUiIcon {
  color: #fff !important;
}

/*
  Cards da etapa "Escolha do kit". Os itens renderizam como sap.f.GridListItem
  (.sapFGLI), NÃO como GenericTile — por isso o seletor é só .subrunKitTile.
  O grid tem teto de largura para os cards crescerem no desktop sem esticar
  sem limite (mesma ideia do max-width da .homeImage).
*/
.subrunKitGrid {
  width: 100%;
  max-width: 54rem;
  margin: 0 auto;
}

.subrunKitTile {
  background: #fff;
  border: 2px solid #E4E1D8;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.subrunKitTile:hover {
  border-color: var(--subrun-primary);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}

.subrunKitContent {
  height: 100%;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

.subrunKitImg {
  width: 100%;
  max-width: 19rem;
  height: auto;
}

/* Em telas estreitas o quadrado apertaria o texto — deixa a altura livre. */
@media (max-width: 480px) {
  .subrunKitTile {
    aspect-ratio: auto;
  }

  .subrunKitImg {
    max-width: 19rem;
  }
}

.subrunPixCode {
  font-family: 'Courier New', monospace;
  word-break: break-all;
  background: #fff;
  border: 1px dashed #ccc;
  padding: 0.5rem;
  border-radius: 6px;
}

.subrunSuccessIcon {
  color: var(--subrun-primary);
  font-size: 3rem;
}

.subrunCountdown {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--subrun-primary);
}

.subrunReceiptImg {
  max-width: 100%;
  width: 20rem;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

.subrunRegulationFrame {
  width: 100%;
  height: 100%;
  border: none;
}

.subrunCopyright {
  color: #A6A28F;
  font-size: 0.75rem;
}