:root {
    --oc-lime: #8bc34a;
    --oc-lime-d: #79ab3c;
    --oc-deep: #14432c;
    --oc-deep-2: #1d5a3a;
    --oc-ink: #26302a;
    --oc-muted: #7a857c;
    --oc-border: #dde3d6;
    --oc-red: #c0392b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Open Sans', "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--oc-ink);
    background: #eef1ec;
}

.oc-carregando { text-align: center; color: var(--oc-muted); padding: 48px 16px; }

/* ---- Topbar full-width (logo oficial sobre verde-escuro) ---- */
.oc-topbar { background: var(--oc-deep); padding: 12px 0; }
.oc-topbar-in { max-width: 1280px; margin: 0 auto; width: 100%; padding: 0 24px; display: flex; align-items: center; gap: 12px; }
.oc-topbar .oc-logo { height: 40px; width: auto; display: block; }
.oc-topbar .oc-topbar-tag {
    margin-left: auto; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600;
    color: #bcd6b4; text-transform: uppercase; letter-spacing: 1px;
}

/* ---- Container ---- */
#oc_app { max-width: 1280px; margin: 0 auto; padding: 22px 24px 64px; }

/* ---- Banner da cotação (destaque da granja) ---- */
.oc-banner {
    display: flex; gap: 16px; align-items: center;
    background: linear-gradient(135deg, var(--oc-deep), var(--oc-deep-2));
    color: #fff; border-radius: 18px; padding: 22px 24px; margin-bottom: 18px;
    box-shadow: 0 12px 30px rgba(20, 67, 44, .22);
}
.oc-banner-ico {
    flex: 0 0 58px; width: 58px; height: 58px; border-radius: 15px;
    background: rgba(255, 255, 255, .13); display: flex; align-items: center; justify-content: center; color: #cdefa3;
}
.oc-banner-ico svg { width: 30px; height: 30px; }
.oc-banner-txt { min-width: 0; }
.oc-banner-tag {
    display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; color: #123; background: var(--oc-lime);
    padding: 3px 12px; border-radius: 20px; margin-bottom: 8px;
}
.oc-banner-txt h1 { margin: 0 0 5px; font-family: 'Montserrat', sans-serif; font-size: 25px; font-weight: 700; color: #fff; line-height: 1.15; }
.oc-banner-desc { margin: 0 0 5px; font-size: 15px; color: #dbe9d1; }
.oc-banner-meta { margin: 2px 0 0; font-size: 13px; color: #b7d1ae; }
.oc-banner-meta b { color: #fff; }
/* Fornecedor destacado: rótulo pequeno + nome grande, para o fornecedor se reconhecer */
.oc-banner-forn { margin: 8px 0 0; }
.oc-banner-forn span { display: block; font-family: 'Montserrat', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: #9fc48f; margin-bottom: 1px; }
.oc-banner-forn b { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 700; color: #fff; line-height: 1.15; }
/* Selo em destaque do prazo de resposta */
.oc-prazo { margin-left: auto; align-self: center; flex: 0 0 auto; text-align: center; background: var(--oc-lime); color: var(--oc-deep); border-radius: 12px; padding: 10px 18px; box-shadow: 0 3px 12px rgba(0, 0, 0, .18); }
.oc-prazo .oc-prazo-lbl { display: block; font-family: 'Montserrat', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; opacity: .8; margin-bottom: 2px; }
.oc-prazo b { font-family: 'Montserrat', sans-serif; font-size: 16px; white-space: nowrap; }

/* ---- Cartão de aviso ---- */
.oc-aviso {
    max-width: 560px; margin: 8vh auto; background: #fff; border: 1px solid #e4e8de; border-radius: 18px;
    padding: 34px 28px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
.oc-aviso h2 { margin-top: 0; font-family: 'Montserrat', sans-serif; color: var(--oc-deep); }

/* ---- Observação da cotação ---- */
.oc-obs { margin: -4px 0 18px; padding: 12px 16px; background: #fff; border: 1px solid #e4e8de; border-left: 4px solid var(--oc-lime); border-radius: 12px; font-size: 13px; color: #556; }

/* ---- Títulos de seção ---- */
.oc-sec {
    display: flex; align-items: center; gap: 10px;
    margin: 26px 2px 14px; font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 700; color: var(--oc-deep);
}
.oc-sec::before { content: ''; width: 6px; height: 22px; border-radius: 3px; background: var(--oc-lime); display: inline-block; }

/* ---- Cartões (item / condições) ---- */
.oc-item, .oc-gerais {
    background: #fff; border: 1px solid #e4e8de; border-radius: 16px;
    padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    transition: box-shadow .15s, border-color .15s;
}
.oc-item:hover { border-color: #d3ddc6; box-shadow: 0 8px 22px rgba(0, 0, 0, .08); }
.oc-item-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 700; font-family: 'Montserrat', sans-serif; color: var(--oc-deep); }
.oc-item-cab-txt { min-width: 0; }
.oc-item-qtd { color: var(--oc-muted); font-size: 13px; font-weight: normal; font-family: 'Open Sans', sans-serif; }
.oc-item-obs { font-size: 12.5px; color: #5a4a2a; margin: 7px 0 0; padding: 8px 11px; background: #fff8e6; border-left: 3px solid #f0ad4e; border-radius: 4px; line-height: 1.45; }
.oc-item-obs b { color: #8a6d1a; font-weight: 700; }

/* ---- Endereço do comprador (seção Entrega) ---- */
.oc-entrega-end { background: #eef6f0; border: 1px solid #d5e6db; border-left: 3px solid #3f9d5a; border-radius: 6px; padding: 11px 14px; margin-bottom: 14px; font-size: 13.5px; color: #33413a; line-height: 1.5; }
.oc-entrega-end-tit { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--oc-deep); margin-bottom: 5px; }
.oc-entrega-end-nome { font-weight: 700; color: var(--oc-deep); }
.oc-entrega-end-fone { margin-top: 3px; color: #5a6b60; }

/* ---- Ajuda + checkbox "Vou ofertar" por item ---- */
.oc-itens-ajuda { margin: -6px 2px 12px; font-size: 13px; color: var(--oc-muted); }
.oc-item-chk {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--oc-deep); background: #f0f5e9; border: 1px solid #dce7cd; border-radius: 20px; padding: 5px 12px 5px 10px; user-select: none;
}
.oc-item-chk input { width: 17px; height: 17px; accent-color: var(--oc-lime-d); cursor: pointer; margin: 0; }
.oc-item.off { background: #f6f7f4; }
.oc-item.off .oc-item-chk { background: #eef0ea; color: var(--oc-muted); border-color: #e1e5db; }
.oc-item.off .oc-item-campos { opacity: .45; pointer-events: none; filter: grayscale(.25); }

/* ---- Campo com erro de validação ---- */
.oc-f input.oc-erro { border-color: var(--oc-red); box-shadow: 0 0 0 3px rgba(192, 57, 43, .18); }

/* ---- Marcador de campo obrigatório ---- */
.oc-req { color: var(--oc-red); font-weight: 700; }

/* ---- Grade de campos ---- */
.oc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 13px 15px; margin-top: 12px; }
.oc-f { display: flex; flex-direction: column; position: relative; }
.oc-f label { font-size: 12px; color: #6b756c; margin-bottom: 6px; font-weight: 600; }
.oc-f input {
    padding: 11px 13px; height: 44px; line-height: 20px; border: 1px solid var(--oc-border); border-radius: 11px;
    background: #fff; color: var(--oc-ink); font-size: 14px; width: 100%; font-family: inherit; transition: border-color .12s, box-shadow .12s;
}
.oc-f input:focus { outline: 0; border-color: var(--oc-lime); box-shadow: 0 0 0 3px rgba(139, 195, 74, .2); }
.oc-f input[readonly], .oc-f input:disabled { background: #eef0ea; color: #8a8f86; }
.oc-f input[type=date] { cursor: pointer; }
.oc-f input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; filter: invert(38%) sepia(60%) saturate(500%) hue-rotate(45deg); }

/* ---- Campo full-width e textarea (observação de pagamento) ---- */
.oc-f-full { grid-column: 1 / -1; }
.oc-f textarea {
    padding: 11px 13px; border: 1px solid var(--oc-border); border-radius: 11px;
    background: #fff; color: var(--oc-ink); font-size: 14px; width: 100%; font-family: inherit;
    resize: vertical; min-height: 66px; transition: border-color .12s, box-shadow .12s;
}
.oc-f textarea:focus { outline: 0; border-color: var(--oc-lime); box-shadow: 0 0 0 3px rgba(139, 195, 74, .2); }

/* ---- Select customizado (substitui o nativo) ---- */
.oc-select { position: relative; }
.oc-select-btn {
    width: 100%; height: 44px; text-align: left; padding: 11px 36px 11px 13px;
    border: 1px solid var(--oc-border); border-radius: 11px; background: #fff; color: var(--oc-ink);
    font-size: 14px; font-family: inherit; cursor: pointer; position: relative;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oc-select-btn::after {
    content: ''; position: absolute; right: 15px; top: 46%; width: 8px; height: 8px;
    border-right: 2px solid #8a938a; border-bottom: 2px solid #8a938a; transform: translateY(-50%) rotate(45deg); transition: transform .15s;
}
.oc-select.open .oc-select-btn { border-color: var(--oc-lime); box-shadow: 0 0 0 3px rgba(139, 195, 74, .2); }
.oc-select.open .oc-select-btn::after { transform: translateY(-20%) rotate(-135deg); }
.oc-select-list {
    position: absolute; z-index: 50; top: calc(100% + 5px); left: 0; right: 0; background: #fff;
    border: 1px solid var(--oc-border); border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, .15);
    padding: 6px; display: none; max-height: 240px; overflow: auto;
}
.oc-select.open .oc-select-list { display: block; }
.oc-select-item { padding: 10px 11px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.oc-select-item:hover { background: #f0f5e9; }
.oc-select-item.sel { background: rgba(139, 195, 74, .18); color: var(--oc-deep); font-weight: 600; }

/* ---- Data customizada (calendário estilizado, padrão do sistema) ---- */
.oc-datewrap { position: relative; }
.oc-date-vis { cursor: pointer; padding-right: 40px !important; }
/* readonly é só para forçar o uso do calendário — não deve parecer desabilitado */
.oc-f input.oc-date-vis[readonly] { background: #fff; color: var(--oc-ink); }
.oc-date-ico { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--oc-lime-d); pointer-events: none; display: flex; }
.oc-cal {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 300px; max-width: 92vw;
    background: #fff; border: 1px solid var(--oc-border); border-radius: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
    padding: 12px; display: none;
}
.oc-datewrap.open .oc-cal { display: block; }
.oc-datewrap.up .oc-cal { top: auto; bottom: calc(100% + 6px); }
.oc-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.oc-cal-tit { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--oc-deep); font-size: 15px; }
.oc-cal-nav { border: 0; background: #f0f5e9; color: var(--oc-deep); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; }
.oc-cal-nav:hover { background: #e2eed3; }
.oc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.oc-cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--oc-muted); padding: 4px 0; }
.oc-cal-day { border: 0; background: transparent; height: 34px; border-radius: 9px; cursor: pointer; font-size: 13px; color: var(--oc-ink); font-family: inherit; }
.oc-cal-day.out { visibility: hidden; }
.oc-cal-day:hover { background: #f0f5e9; }
.oc-cal-day.hoje { box-shadow: inset 0 0 0 2px var(--oc-lime); }
.oc-cal-day.sel { background: var(--oc-lime); color: var(--oc-deep); font-weight: 700; }
.oc-cal-foot { display: flex; justify-content: space-between; margin-top: 10px; }
.oc-cal-limpar, .oc-cal-hoje { border: 0; background: transparent; color: var(--oc-lime-d); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; cursor: pointer; padding: 5px 8px; border-radius: 7px; }
.oc-cal-limpar:hover, .oc-cal-hoje:hover { background: #f0f5e9; }

/* ---- Rodapé: total + ações ---- */
.oc-rodape {
    background: #fff; border: 1px solid #e4e8de; border-radius: 18px; padding: 18px 20px; margin: 18px 0 40px;
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}
.oc-total { font-size: 15px; color: var(--oc-ink); }
.oc-total b { color: var(--oc-deep); font-size: 22px; font-family: 'Montserrat', sans-serif; }
.oc-total small { display: block; color: #9aa39a; font-size: 12px; }
.oc-acoes { display: flex; gap: 10px; flex-wrap: wrap; }

.oc-btn {
    border: 2px solid transparent; border-radius: 12px; padding: 12px 22px;
    font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s;
    display: inline-flex; align-items: center; gap: 8px;
}
.oc-btn:disabled { opacity: .5; cursor: default; }
.oc-btn-enviar { background: var(--oc-lime); color: var(--oc-deep); }
.oc-btn-enviar:hover:not(:disabled) { background: var(--oc-lime-d); }
.oc-btn-rascunho { background: #fff; border-color: var(--oc-border); color: var(--oc-deep); }
.oc-btn-rascunho:hover:not(:disabled) { background: #f2f5ee; border-color: #cdd7c0; }
.oc-btn-recusar { background: #fff; border-color: #e6c3bd; color: var(--oc-red); }
.oc-btn-recusar:hover:not(:disabled) { background: var(--oc-red); color: #fff; border-color: var(--oc-red); }

/* ============================================================
   Confirmação "Tem Certeza?" + toast
   ============================================================ */
.oc-ov { position: fixed; inset: 0; background: rgba(20, 67, 44, .5); display: flex; align-items: center; justify-content: center; z-index: 3000; animation: oc-fade .15s ease; }
@keyframes oc-fade { from { opacity: 0 } to { opacity: 1 } }
.oc-dialog { background: #fff; border-radius: 18px; width: 92%; max-width: 460px; padding: 30px 26px 22px; text-align: center; box-shadow: 0 16px 48px rgba(0, 0, 0, .3); }
.oc-dialog-ico { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; border: 3px solid; color: var(--oc-lime-d); border-color: #cfe6a8; }
.oc-dialog-ico.perigo { color: var(--oc-red); border-color: #f0c0ba; }
.oc-dialog h3 { margin: 0 0 8px; font-family: 'Montserrat', sans-serif; font-size: 22px; color: var(--oc-deep); }
.oc-dialog p { margin: 0 0 18px; color: #666; font-size: 15px; }
.oc-dialog textarea { width: 100%; min-height: 84px; resize: vertical; padding: 10px 12px; border: 1px solid var(--oc-border); border-radius: 11px; background: #fff; font-size: 14px; font-family: inherit; margin-bottom: 18px; }
.oc-dialog textarea:focus { outline: 0; border-color: var(--oc-lime); box-shadow: 0 0 0 3px rgba(139, 195, 74, .2); }
.oc-dialog-acoes { display: flex; gap: 10px; justify-content: center; }
.oc-dialog-btn { border: 2px solid transparent; border-radius: 12px; padding: 11px 26px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; }
.oc-dialog-sim { background: var(--oc-lime); color: var(--oc-deep); }
.oc-dialog-sim:hover { background: var(--oc-lime-d); }
.oc-dialog-sim.perigo { background: var(--oc-red); color: #fff; }
.oc-dialog-sim.perigo:hover { background: #a13224; }
.oc-dialog-nao { background: #fff; border-color: var(--oc-border); color: #6b756c; }
.oc-dialog-nao:hover { background: #f2f5ee; }

#oc_toasts { position: fixed; top: 16px; right: 16px; z-index: 4000; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.oc-toast { background: #fff; border-radius: 12px; padding: 14px 16px 14px 14px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #333; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); border-left: 5px solid #ccc; animation: oc-slide .25s ease; }
@keyframes oc-slide { from { transform: translateX(30px); opacity: 0 } to { transform: none; opacity: 1 } }
.oc-toast .oc-toast-ico { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 700; }
.oc-toast-ok { border-left-color: var(--oc-lime); }
.oc-toast-ok .oc-toast-ico { background: var(--oc-lime); }
.oc-toast-erro { border-left-color: var(--oc-red); }
.oc-toast-erro .oc-toast-ico { background: var(--oc-red); }

@media (max-width: 520px) {
    .oc-banner { flex-direction: column; text-align: center; }
    .oc-prazo { margin-left: 0; width: 100%; }
    .oc-rodape { flex-direction: column; align-items: stretch; }
    .oc-acoes { justify-content: stretch; }
    .oc-btn { flex: 1; justify-content: center; }
}