/* ═══════════════════════════════════════════════
   PEDIDO DE COTAÇÃO v1.0 — Frontend
   #0c3b38 · #c9a84c · #ffffff
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --teal:      #0c3b38;
  --teal-mid:  #1a5c57;
  --teal-pale: rgba(12,59,56,.07);
  --gold:      #c9a84c;
  --gold-dk:   #a07c2a;
  --gold-pale: rgba(201,168,76,.1);
  --white:     #fff;
  --off:       #f7f9fb;
  --border:    #e8ecf0;
  --txt:       #0f1923;
  --muted:     #6b7684;
  --r:         14px;
  --sh:        0 2px 14px rgba(0,0,0,.07);
  --sh-hv:     0 8px 32px rgba(12,59,56,.13);
}

.cot-wrap { font-family:'Plus Jakarta Sans',-apple-system,sans-serif; color:var(--txt); max-width:800px; margin:0 auto; }

/* ── Cabeçalho ────────────────────────────────── */
.cot-header {
  display:flex; align-items:flex-start; gap:16px;
  background:var(--teal); border-radius:var(--r);
  padding:26px 30px; margin-bottom:32px;
}
.cot-header-ico { font-size:38px; flex-shrink:0; }
.cot-header h2 { font-size:22px!important; font-weight:800!important; color:#fff!important; margin:0 0 5px!important; }
.cot-header p  { font-size:14px!important; color:rgba(255,255,255,.72)!important; margin:0!important; }

/* ── Sucesso ──────────────────────────────────── */
.cot-ok {
  text-align:center;
  background:linear-gradient(135deg,rgba(12,59,56,.04),var(--white));
  border:2px solid var(--gold); border-radius:var(--r);
  padding:52px 32px; margin-bottom:24px;
}
.cot-ok-ico { font-size:60px; margin-bottom:14px; }
.cot-ok h3 { font-size:24px!important; font-weight:800!important; color:var(--teal)!important; margin:0 0 8px!important; }
.cot-ok p  { font-size:15px!important; color:var(--muted)!important; margin:0 0 18px!important; }
.cot-ref-badge {
  display:inline-block; background:var(--teal); color:var(--gold);
  font-size:20px; font-weight:800; letter-spacing:2px;
  padding:10px 28px; border-radius:10px;
}

/* ── Erro ─────────────────────────────────────── */
.cot-err {
  display:flex; align-items:center; gap:10px;
  background:#fef2f2; border:2px solid #fecaca; border-radius:10px;
  padding:14px 18px; font-size:14px; font-weight:600; color:#b91c1c;
  margin-bottom:20px;
}
.cot-err::before { content:'⚠️'; font-size:16px; flex-shrink:0; }

/* ── Secções ──────────────────────────────────── */
.cot-section { margin-bottom:30px; }
.cot-section-title {
  display:flex; align-items:center; gap:12px;
  font-size:16px; font-weight:800; color:var(--teal);
  margin-bottom:18px; padding-bottom:12px;
  border-bottom:2px solid var(--border);
}
.cot-section-num {
  background:var(--teal); color:var(--gold);
  font-size:12px; font-weight:800; width:28px; height:28px;
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* ── Grid campos ──────────────────────────────── */
.cot-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cot-g    { display:flex; flex-direction:column; gap:6px; }
.cot-full { grid-column:1/-1; }

.cot-g label { font-size:13px; font-weight:700; color:var(--teal); }
.cot-g label span { color:#ef4444; margin-left:2px; }

.cot-g input,
.cot-g textarea {
  padding:12px 14px; border:2px solid var(--border); border-radius:10px;
  font-size:14px; font-family:inherit; color:var(--txt); background:var(--white);
  outline:none; transition:border-color .2s,box-shadow .2s;
  width:100%; box-sizing:border-box;
}
.cot-g input:focus, .cot-g textarea:focus {
  border-color:var(--teal); box-shadow:0 0 0 3px rgba(12,59,56,.1);
}
.cot-g input.er { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.1); }
.cot-g textarea  { resize:vertical; min-height:110px; }

/* ── SERVIÇOS — cards seleccionáveis ──────────── */
.cot-servicos-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
}

.cot-srv-card {
  position:relative; cursor:pointer;
  display:block;
}
.cot-srv-card input[type=checkbox] {
  position:absolute; opacity:0; width:0; height:0;
}
.cot-srv-inner {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  border:2px solid var(--border); border-radius:var(--r);
  background:var(--white);
  transition:all .18s;
  user-select:none;
}
.cot-srv-inner:hover {
  border-color:var(--teal); background:var(--teal-pale);
}
.cot-srv-check {
  width:22px; height:22px; border-radius:6px; border:2px solid var(--border);
  background:var(--white); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:transparent; flex-shrink:0;
  transition:all .18s;
}
.cot-srv-name { font-size:13px; font-weight:600; color:var(--muted); line-height:1.4; transition:color .18s; }

/* Estado seleccionado */
.cot-srv-card input:checked + .cot-srv-inner {
  border-color:var(--teal); background:var(--teal);
  box-shadow:0 4px 14px rgba(12,59,56,.18);
}
.cot-srv-card input:checked + .cot-srv-inner .cot-srv-check {
  background:var(--gold); border-color:var(--gold); color:var(--teal);
}
.cot-srv-card input:checked + .cot-srv-inner .cot-srv-name {
  color:var(--gold); font-weight:700;
}

/* Erro serviços */
.cot-srv-err {
  margin-top:10px; font-size:13px; font-weight:600; color:#b91c1c;
  background:#fef2f2; border:1px solid #fecaca; border-radius:8px; padding:10px 14px;
}

/* ── Rodapé do form ───────────────────────────── */
.cot-footer {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-top:24px; border-top:2px solid var(--border);
  margin-top:8px;
}
.cot-priv { font-size:12px; color:#94a3b8; margin:0!important; flex:1; }

#cot-enviar {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--teal); color:var(--gold); border:none;
  padding:15px 30px; border-radius:10px;
  font-size:15px; font-weight:800; font-family:inherit; cursor:pointer;
  transition:all .2s; box-shadow:0 4px 16px rgba(12,59,56,.25);
  white-space:nowrap;
}
#cot-enviar:hover:not(:disabled) {
  background:#091f1d; transform:translateY(-2px);
  box-shadow:0 6px 22px rgba(12,59,56,.35);
}
#cot-enviar:disabled { opacity:.55; cursor:not-allowed; transform:none; }

/* ── Responsive ───────────────────────────────── */
@media (max-width:600px) {
  .cot-grid { grid-template-columns:1fr; }
  .cot-full { grid-column:1; }
  .cot-servicos-grid { grid-template-columns:1fr; }
  .cot-header { flex-direction:column; gap:10px; }
  .cot-footer { flex-direction:column; align-items:stretch; }
  #cot-enviar { width:100%; justify-content:center; }
}