/* Campos do Orca (ver public/js/app/fields.js). Vale pro painel e pro site.
   Regra: o nativo fica escondido por baixo; o que aparece é nosso, com a
   mesma altura (44px, 52px no .form-xl), o mesmo raio e o mesmo anel de foco
   dos inputs de texto. Cores só por token: claro e escuro de graça. */

/* ------------------------------------------------------------ base */
.sel, .numf, .colorf, .suggf, .pwf, .telf, .moneyf { position: relative; width: 100%; min-width: 0; }
.field-inline .sel, .field-inline .numf, .field-inline .moneyf, .field-inline .colorf { width: auto; }
.sel-native, .colorf-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); }

/* Flutuante comum (lista do select, cor, sugestões) */
.fpop { position: fixed; z-index: 220; padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); opacity: 0; transform: translateY(-4px) scale(0.985); transition: opacity 140ms var(--ease), transform 140ms var(--ease); max-height: min(360px, calc(100vh - 24px)); overflow: auto; }
.fpop.is-up { transform: translateY(4px) scale(0.985); }
.fpop.is-in { opacity: 1; transform: none; }
[data-mode='dark'] .fpop, :root:not([data-mode='light']) .fpop { background: var(--surface-2); }

/* Folha de baixo (celular) */
.fsheet-backdrop { position: fixed; inset: 0; z-index: 230; display: grid; align-items: end; background: var(--backdrop); backdrop-filter: blur(4px); opacity: 0; transition: opacity 160ms var(--ease); }
.fsheet-backdrop.is-in { opacity: 1; }
.fsheet { background: var(--surface); border-radius: 22px 22px 0 0; border-top: 1px solid var(--line-2); padding: 10px 14px calc(16px + env(safe-area-inset-bottom)); max-height: calc(100svh - 40px); overflow: auto; transform: translateY(24px); transition: transform 220ms var(--ease); box-shadow: var(--shadow-2); }
.fsheet-backdrop.is-in .fsheet { transform: none; }
.fsheet::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 99px; background: var(--line-2); margin: 0 auto 8px; }
.fsheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 10px; font-size: 16px; }
.fsheet-close { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; }
.fsheet-body { display: flex; flex-direction: column; gap: 10px; }

/* ---------------------------------------------------------- select */
.sel-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 0 12px 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-align: left; font: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.sel-btn:hover { border-color: var(--brand); }
.sel-btn:focus-visible, .sel.is-open .sel-btn { border-color: var(--brand); box-shadow: var(--ring); outline: none; }
.sel-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.sel-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-chev { color: var(--ink-3); flex: none; transition: transform var(--t) var(--ease); }
.sel.is-open .sel-chev { transform: rotate(180deg); }
.form-xl .sel-btn { height: 52px; font-size: 16px; border-radius: 12px; }
.sel-list { display: flex; flex-direction: column; gap: 2px; }
.sel-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; font: inherit; font-size: 14px; }
.sel-opt:hover, .sel-opt:focus-visible { background: var(--surface-2); outline: none; }
.sel-opt.is-on { background: var(--brand-soft); color: var(--brand-soft-ink); font-weight: 600; }
.sel-opt:disabled { opacity: 0.45; cursor: not-allowed; }
.sel-opt .ic { color: var(--brand-2); flex: none; }
.fsheet .sel-opt { min-height: 52px; font-size: 16px; border-radius: 12px; }

/* ---------------------------------------------------------- número */
.numf { display: inline-flex; align-items: stretch; width: auto; max-width: 100%; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.numf:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.numf.is-disabled { opacity: 0.6; }
.numf-btn { width: 40px; border: 0; background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; flex: none; transition: background var(--t-fast), color var(--t-fast); }
.numf-btn:hover { background: var(--surface-3); color: var(--ink); }
.numf-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.numf input[type='number'] { width: 72px; min-width: 0; height: 42px; border: 0; border-radius: 0; background: transparent; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 6px; -moz-appearance: textfield; appearance: textfield; }
.numf input[type='number']:focus { box-shadow: none; outline: none; }
.numf input::-webkit-outer-spin-button, .numf input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field > .numf { align-self: flex-start; }

/* Quantidade compacta (dentro da linha de item do editor) */
.stepper-s { border-radius: 8px; }
.stepper-s button { width: 30px; height: 34px; }
.stepper-s input { width: 46px; height: 34px; font-size: 13.5px; }

/* ------------------------------------------------------------- cor */
.colorf-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px 0 6px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.colorf-btn:hover { border-color: var(--brand); }
.colorf-btn:focus-visible { border-color: var(--brand); box-shadow: var(--ring); outline: none; }
.colorf-dot { width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); flex: none; }
.colorf-hex { border: 0; background: none; padding: 0; font-size: 12.5px; color: var(--ink-2); letter-spacing: 0.02em; }
.colorf-pop { display: flex; flex-direction: column; gap: 10px; padding: 6px; }
.colorf-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.colorf-sw { aspect-ratio: 1; min-height: 40px; border-radius: 10px; border: 2px solid transparent; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); cursor: pointer; transition: transform 80ms, border-color var(--t-fast); }
.colorf-sw:hover { transform: scale(1.06); }
.colorf-sw:focus-visible { outline: none; box-shadow: var(--ring), inset 0 0 0 1px rgb(0 0 0 / 0.1); }
.colorf-sw.is-on { border-color: var(--ink); }
.colorf-hexrow { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.colorf-hexrow input { height: 40px; }
.colorf-input.is-invalid { border-color: var(--danger); }
.colorf-more { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13.5px; }
.colorf-more:hover { color: var(--ink); border-color: var(--brand); }
.fsheet .colorf-grid { grid-template-columns: repeat(5, 1fr); }
.fsheet .colorf-sw { min-height: 52px; }

/* ------------------------------------------------------- sugestões */
.suggf-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); max-height: 240px; overflow: auto; animation: fpop-in 140ms var(--ease); }
[data-mode='dark'] .suggf-list, :root:not([data-mode='light']) .suggf-list { background: var(--surface-2); }
@keyframes fpop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.suggf-opt { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; font: inherit; font-size: 14px; }
.suggf-opt:hover, .suggf-opt.is-on { background: var(--surface-2); }
[data-mode='dark'] .suggf-opt:hover, [data-mode='dark'] .suggf-opt.is-on { background: var(--surface-3); }

/* ----------------------------------------------------------- senha */
.pwf input { padding-right: 48px; }
.pwf-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--ink-3); display: grid; place-items: center; }
.pwf-eye:hover, .pwf-eye.is-on { color: var(--ink); background: var(--surface-2); }

/* -------------------------------------------------------- telefone */
.telf input { padding-left: 42px; }
.telf-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--whatsapp); pointer-events: none; }
.form-xl .telf input { padding-left: 46px; }
.form-xl .telf-ic { left: 15px; }

/* ----------------------------------------------------------- preço */
.moneyf input { padding-left: 40px; text-align: right; font-weight: 600; }
.moneyf-cur { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 700; color: var(--ink-3); pointer-events: none; }
.qi-price .moneyf input { height: 34px; padding-left: 34px; font-weight: 500; }
.qi-price .moneyf-cur { left: 8px; font-size: 11px; }

/* -------------------------------------------------------- textarea */
.ta-grow { overflow: hidden; resize: none; }
.ta-count { align-self: flex-end; font-size: 11.5px; color: var(--ink-3); margin-top: -2px; }
.ta-count.is-near { color: var(--warning); }

/* ---------------------------------------------- arrastar arquivos */
.cover-field.is-drop, .photo-grid.is-drop { border-color: var(--brand); background: var(--brand-soft); }
.cover-field, .photo-grid { transition: border-color var(--t-fast), background var(--t-fast); }

/* --------------------------------------------------------- celular */
@media (max-width: 860px) {
  .sel-btn { height: 48px; font-size: 16px; }
  .numf input[type='number'] { height: 46px; font-size: 16px; width: 80px; }
  .numf-btn { width: 44px; }
  .colorf-btn { height: 44px; }
  .colorf-dot { width: 30px; height: 30px; }
}

/* Dentro de qualquer invólucro, o input ocupa a largura toda. */
.pwf input, .telf input, .moneyf input, .suggf input { width: 100%; }

/* Botão de tema (site e painel) */
.theme-toggle { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.theme-toggle:hover { background: var(--surface-2); color: var(--ink); }
.theme-toggle .ic { transition: transform var(--t) var(--ease); }
.theme-toggle:hover .ic { transform: rotate(15deg); }

/* Especificidade acima de input[type='color'] do app.css. */
input.colorf-native, select.sel-native { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); }
/* Na tela de marca o código hex já aparece dentro do botão de cor. */
.color-pick:has(.colorf) code { display: none; }
.color-pick .colorf { width: auto; }