/* 4E: aparência de app iOS nas telas do comprador e do vendedor (body.ios-app; a home fica de fora).
   Regras de forma (fundo, fonte, cantos, espaçamento, toque). Não altera a cor global do texto (decisão do dono:
   body,p continuam brancos; contraste é corrigido ponto a ponto). Botões seguem roxo com texto branco. */
:root {
    --ios-bg: #f2f2f7;
    --ios-surface: #ffffff;
    --ios-label: #1c1c1e;
    --ios-secondary: #6e6e73;
    --ios-separator: rgba(60, 60, 67, .16);
    --ios-radius: 16px;
    --ios-radius-sm: 12px;
    --ios-purple: #9926f0;
    --ios-purple-pressed: #7a1fc2;
    --ios-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(17, 12, 46, .05);
    --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Roboto", "Segoe UI", sans-serif;
}

body.ios-app { background: var(--ios-bg); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(153, 38, 240, .12); }
.ios-app main { font-family: var(--ios-font); }
.ios-app main :is(input, select, textarea, button, .btn) { font-family: var(--ios-font); }

/* Títulos grandes, sem caixa alta, como nos apps do iPhone. */
.ios-app main :is(h1, h2, h3, h4) { letter-spacing: -.01em; text-transform: none; }
.ios-app main :is(h1, .h1) { font-weight: 700; }

/* Superfícies agrupadas: brancas, cantos de 16px, sombra leve. (O card de tênis tem estilo próprio.) */
.ios-app main .card:not(.card-sneaker) { border: 0; border-radius: var(--ios-radius); box-shadow: var(--ios-shadow); overflow: hidden; }
.ios-app main .modal-content { border: 0; border-radius: 20px; }
.ios-app main .alert { border-radius: var(--ios-radius-sm); }

/* Campos: 44px de toque e 16px de fonte (o iPhone não dá zoom ao focar). */
.ios-app main :is(.form-control, .form-select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    min-height: 44px;
    font-size: 16px;
    border-radius: var(--ios-radius-sm);
    border-color: #d1d1d6;
}
.ios-app main textarea { min-height: 96px; }
.ios-app main :is(.form-control, .form-select, input, select, textarea):focus {
    border-color: var(--ios-purple);
    box-shadow: 0 0 0 3px rgba(153, 38, 240, .18);
    outline: 0;
}
.ios-app main :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ios-purple); }

/* Botões: 44px, cantos de 12px; roxo com texto branco. */
.ios-app main .btn { min-height: 44px; border-radius: var(--ios-radius-sm); font-weight: 600; }
.ios-app main .btn-sm { min-height: 36px; border-radius: 10px; }
.ios-app main .btn-primary { background: var(--ios-purple); border-color: var(--ios-purple); color: #fff; }
.ios-app main .btn-primary:is(:hover, :focus, :active) { background: var(--ios-purple-pressed); border-color: var(--ios-purple-pressed); color: #fff; }
.ios-app main .btn-outline-primary { border-color: var(--ios-purple); color: var(--ios-purple); background: #fff; }
.ios-app main .btn-outline-primary:is(:hover, :focus, :active) { background: var(--ios-purple); color: #fff; }

/* Abas no formato "segmentado" do iOS. */
.ios-app main .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 2px;
    border: 0;
    border-radius: 10px;
    background: #e5e5ea;
    overflow-x: auto;
}
.ios-app main .nav-tabs .nav-item { flex: 1 0 auto; }
.ios-app main .nav-tabs .nav-link {
    width: 100%;
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    color: var(--ios-label);
    font-weight: 600;
    background: transparent;
    white-space: nowrap;
}
.ios-app main .nav-tabs .nav-link.active { background: var(--ios-surface); color: var(--ios-label); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* Grades de tênis fora da home: duas colunas no celular, mesmo espaçamento da home. */
.ios-app main :is(#result-sneakers, #result-colecao, #result-sneakers-vendido, .vitrine-grid) { gap: 12px; }
.ios-app main .vitrine-item { list-style: none; min-width: 0; }

/* Vitrine: contagem e texto, com sublinhado na seleção (referência aprovada Enjoei). */
.ios-app main .vitrine-tabs {
    background: transparent;
    border-radius: 0;
    padding: 0;
    gap: 12px;
    margin: 8px 0 4px;
    border-bottom: 1px solid var(--ios-separator, #e5e5ea);
}
.ios-app main .vitrine-tabs .vtab {
    flex: 0 0 auto;
    justify-content: center;
    min-height: 48px;
    padding: 0 8px;
    border-radius: 0;
    color: #66616c;
    font-weight: 500;
    box-shadow: none;
    background: transparent;
}
.ios-app main .vitrine-tabs .vtab.active { background: transparent; color: var(--primary); font-weight: 700; box-shadow: none; }
.ios-app main .vitrine-tabs .vtab::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: transparent; }
.ios-app main .vitrine-tabs .vtab.active::after { background: var(--primary); }
.ios-app main .vitrine-tabs .vtab:focus-visible { outline: none; text-decoration: underline dotted; text-underline-offset: 5px; }
.ios-app main .vitrine-tabs .vtab-count { color: inherit; font: inherit; }

/* O botão de corrigir ocupa uma linha abaixo do card, sem comprimir foto, preço ou status. */
.sneaker-content--needs-fix { flex-direction: column; min-width: 0; }
.sneaker-content.sneaker-content--needs-fix .card-sneaker { height: auto; flex: 1; min-width: 0; width: 100%; }
.sneaker-content--needs-fix .sneaker-fix { flex: 0 0 auto; padding: 10px 12px; font-size: 14px; line-height: 1.35; white-space: normal; }

/* Perfil: campos agrupados num bloco branco, como nos Ajustes do iPhone. */
.ios-app main #container-tenis #contetResult {
    background: var(--ios-surface);
    border-radius: var(--ios-radius);
    box-shadow: var(--ios-shadow);
    padding: 20px 8px 8px;
    margin: 0 0 16px;
}

/* Checkout: um pouco mais de ar entre rótulo e campo. */
.ios-app main label + :is(input, select, .form-control) { margin-top: 4px; }
.ios-app main .card :is(input, select, .form-control):not([type="checkbox"]):not([type="radio"]) { margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
    .ios-app main * { transition: none !important; }
}

/* 4H: touch targets shared by the existing listing wizard and checkout, outside the home. */
.ios-app main :is(.primary-button, .secondary-button) { min-height: 44px; min-width: 104px; padding: 10px 18px; border-radius: 12px; font-size: 16px; font-weight: 600; }
.ios-app main .secondary-button { color: #625d6b; }
.ios-app main #steps__container > footer { gap: 12px; flex-wrap: wrap; }
.ios-app main .checkout-freight-note { color: #79511b; background: #fff3cd; border: 1px solid #ffe5a0; padding: 12px; border-radius: 12px; margin: 12px 0 0; font-size: 14px; line-height: 1.45; }
.ios-app main .vitrine-tabs .vtab { min-height: 44px; }