/* Cadastro iFood · Milky Moo — identidade da marca (rosa #EA95A9, carvão #231F20, Montserrat, estampa malhada) */
:root {
  --rosa-50: #FFF5F8; --rosa-100: #FCE4EC; --rosa-300: #F8C3D1; --rosa-500: #EA95A9; --rosa-700: #C76F85; --rosa-800: #AE5568;
  --carvao-900: #231F20; --carvao-700: #3D3839; --carvao-500: #5E5658;
  --papel: #FFFFFF; --fundo: #FBF7F8; --linha: #EADFE3; --linha-forte: #D6C9CE;
  --texto: #231F20; --texto-2: #5E5658; --texto-3: #6F6568;
  --erro: #B42318; --erro-fundo: #FEF3F2; --ok: #1F7A4D; --ok-fundo: #EDF7F1; --aviso: #8A5A00; --aviso-fundo: #FFF7E6;
  --raio: 10px; --raio-g: 16px;
  --sombra: 0 1px 2px rgba(35, 31, 32, .06), 0 8px 24px -12px rgba(35, 31, 32, .18);
  --fonte: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 500 15px/1.45 var(--fonte); color: var(--texto); background: var(--fundo); caret-color: var(--rosa-800); }
::selection { background: var(--rosa-300); color: var(--carvao-900); }
a { color: var(--rosa-800); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rosa-800); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: var(--rosa-300) transparent; }

.icone { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: 999px; font-weight: 700; letter-spacing: .01em; cursor: pointer; text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { cursor: not-allowed; opacity: .55; }
.btn--rosa { background: var(--rosa-500); color: var(--carvao-900); }
.btn--rosa:hover:not([disabled]) { background: var(--rosa-700); color: #fff; }
.btn--carvao { background: var(--carvao-900); color: #fff; }
.btn--carvao:hover:not([disabled]) { background: var(--carvao-700); }
.btn--linha { background: var(--papel); border-color: var(--linha-forte); color: var(--texto); }
.btn--linha:hover:not([disabled]) { border-color: var(--rosa-700); color: var(--rosa-800); }
.btn--perigo { background: var(--papel); border-color: #F1C0BB; color: var(--erro); }
.btn--perigo:hover:not([disabled]) { background: var(--erro-fundo); }
.btn--pequeno { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn--icone { width: 34px; min-height: 34px; padding: 0; border-radius: 8px; background: transparent; color: var(--texto-2); }
.btn--icone:hover { background: var(--rosa-100); color: var(--carvao-900); }

/* campos */
.campo { display: grid; gap: 6px; min-width: 0; }
.campo__rotulo { font-size: 13.5px; font-weight: 700; color: var(--texto); }
.campo__rotulo .obr { color: var(--rosa-800); margin-left: 2px; }
.campo__ajuda { font-size: 12.5px; color: var(--texto-3); }
.campo__erro { font-size: 12.5px; font-weight: 600; color: var(--erro); display: flex; gap: 6px; align-items: flex-start; }
.campo__erro:empty { display: none; }
.entrada { width: 100%; min-height: 48px; padding: 11px 14px; font-size: 16px; font-weight: 500; background: var(--papel);
  border: 1px solid var(--linha-forte); border-radius: var(--raio); transition: border-color .15s, box-shadow .15s; appearance: none; }
.entrada::placeholder { color: #9A8F92; }
.entrada:hover { border-color: var(--carvao-500); }
.entrada:focus { outline: none; border-color: var(--rosa-800); box-shadow: 0 0 0 3px var(--rosa-100); }
select.entrada { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E5658' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.campo--erro .entrada { border-color: var(--erro); background: var(--erro-fundo); }
.campo--erro .entrada:focus { box-shadow: 0 0 0 3px #FAD7D3; }
.entrada:disabled { background: #F4EFF1; color: var(--texto-2); }

.escolhas { display: flex; flex-wrap: wrap; gap: 8px; }
.escolha { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px 10px 12px;
  background: var(--papel); border: 1px solid var(--linha-forte); border-radius: var(--raio); cursor: pointer; font-weight: 600; flex: 1 1 200px; }
.escolha input { width: 20px; height: 20px; margin: 0; accent-color: var(--rosa-800); }
.escolha small { display: block; font-weight: 500; color: var(--texto-3); font-size: 12.5px; }
.escolha:has(input:checked) { border-color: var(--rosa-800); background: var(--rosa-50); box-shadow: inset 0 0 0 1px var(--rosa-800); }
.escolha:has(input:focus-visible) { outline: 2px solid var(--rosa-800); outline-offset: 2px; }
.marcar { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.marcar input { width: 18px; height: 18px; accent-color: var(--rosa-800); margin: 0; }

.selo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.6; }
.selo--rosa { background: var(--rosa-100); color: var(--rosa-800); }
.selo--ok { background: var(--ok-fundo); color: var(--ok); }
.selo--erro { background: var(--erro-fundo); color: var(--erro); }
.selo--aviso { background: var(--aviso-fundo); color: var(--aviso); }
.selo--neutro { background: #F1ECEE; color: var(--texto-2); }
.selo--carvao { background: var(--carvao-900); color: #fff; }

.aviso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--raio); font-size: 14px; line-height: 1.5; }
.aviso .icone { margin-top: 2px; }
.aviso--info { background: var(--rosa-50); color: var(--carvao-700); border: 1px solid var(--rosa-300); }
.aviso--aviso { background: var(--aviso-fundo); color: #6B4700; border: 1px solid #F3D9A4; }
.aviso--erro { background: var(--erro-fundo); color: #7A271A; border: 1px solid #F6C9C3; }

.brinde { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 100; padding: 12px 18px; border-radius: 999px;
  background: var(--carvao-900); color: #fff; font-weight: 600; font-size: 14px; box-shadow: var(--sombra); transition: opacity .25s var(--ease), transform .35s var(--ease); pointer-events: none; }
.brinde--vis { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
