/* ============================================================
   CALCULADORA DE BICICLETARIOS — identidade do orionbike.com.br
   ============================================================ */

.obc { --obc-line: #E1E5EA; --obc-muted: #5E6673; --obc-soft: #F5F6F8; --obc-red: #B42318; }

.obc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr); gap: 28px; align-items: start; }

.obc-card { background: #fff; border: 1px solid var(--obc-line); border-radius: 10px; box-shadow: 0 4px 24px rgba(0, 31, 77, .07); overflow: hidden; }
.obc-inputs { padding: 28px; }

.obc-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.obc-head h2 { font-size: 1.25rem; margin: 0 0 4px; }
.obc-head p { margin: 0; color: var(--obc-muted); font-size: .85rem; line-height: 1.5; }
.obc-pill { flex: 0 0 auto; color: var(--green-main); background: var(--green-light); border: 1px solid #C5E3CD; border-radius: 999px; padding: 6px 12px; font-size: .72rem; font-weight: 600; white-space: nowrap; }

.obc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.obc-full { grid-column: 1 / -1; }
.obc-field label, .obc-label { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .8rem; color: var(--navy); margin-bottom: 7px; }
.obc-field label small { display: block; font-family: 'Poppins', sans-serif; font-weight: 400; color: var(--obc-muted); font-size: .72rem; margin-top: 1px; }
.obc-field input, .obc-field select {
  width: 100%; font: inherit; font-size: .95rem; color: var(--navy); background: #fff;
  border: 1px solid var(--gray-mid); border-radius: 6px; padding: 11px 13px; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.obc-field input:focus, .obc-field select:focus { border-color: var(--green-main); box-shadow: 0 0 0 3px rgba(27, 107, 48, .15); }
.obc-unit { position: relative; display: flex; align-items: center; }
.obc-unit input { padding-right: 58px; }
.obc-unit span { position: absolute; right: 12px; color: var(--obc-muted); font-size: .8rem; font-weight: 600; pointer-events: none; }
.obc-calc-btn { width: 100%; justify-content: center; margin-top: 22px; border: 0; cursor: pointer; font-size: .85rem; padding: 15px 20px; }
@media (min-width: 901px) { .obc-calc-btn { display: none; } } /* no desktop o resultado ja fica ao lado */
.obc-capacity.is-flash { animation: obc-flash .6s ease; }
@keyframes obc-flash { 0% { transform: scale(1); color: #fff; } 35% { transform: scale(1.12); color: #4ADE80; } 100% { transform: scale(1); color: #fff; } }
.obc-result:focus { outline: none; }
.obc-admin-link { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; font-size: .78rem; font-weight: 600; color: var(--green-main); }

.obc-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--gray-mid); border-radius: 8px; background: var(--obc-soft); }
.obc-field .obc-seg input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.obc-seg label { margin: 0; padding: 10px; border-radius: 6px; text-align: center; cursor: pointer; color: var(--obc-muted); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .8rem; display: flex; gap: 8px; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.obc-seg input:checked + label { background: #fff; color: var(--navy); box-shadow: 0 2px 8px rgba(0, 31, 77, .1); }
.obc-seg input:focus-visible + label { outline: 2px solid var(--green-main); outline-offset: 1px; }

.obc-note { margin-top: 22px; padding: 14px 16px; background: var(--obc-soft); border-left: 3px solid var(--green-main); border-radius: 4px; color: var(--obc-muted); font-size: .8rem; line-height: 1.6; }
.obc-note strong { color: var(--navy); }

/* Resultado */
.obc-top { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, #0D4A1F 100%); color: #fff; padding: 26px 28px; }
.obc-status { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.obc-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 5px rgba(74, 222, 128, .15); }
.obc-status.is-bad .obc-dot { background: #F87171; box-shadow: 0 0 0 5px rgba(248, 113, 113, .15); }
.obc-capacity { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 3.4rem; line-height: 1; letter-spacing: -.04em; margin: 16px 0 4px; }
.obc-capacity-label { color: #C9D3E0; font-size: .88rem; }
.obc-rec { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .15); }
.obc-rec small { display: block; color: #AFBBCB; font-size: .75rem; margin-bottom: 2px; }
.obc-rec strong { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; }

.obc-photo { position: relative; min-height: 250px; padding: 18px 20px 52px; display: grid; place-items: center; border-bottom: 1px solid var(--obc-line); }
.obc-photo img { width: 100%; height: 210px; object-fit: contain; }
.obc-photo img[hidden], .obc-photo-fallback[hidden] { display: none; }
.obc-photo-fallback { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--obc-muted); font-size: .82rem; text-align: center; }
.obc-photo-fallback i { font-size: 2.2rem; color: var(--gray-mid); }
.obc-photo-caption { position: absolute; left: 20px; right: 20px; bottom: 14px; display: flex; justify-content: space-between; gap: 16px; color: var(--obc-muted); font-size: .74rem; line-height: 1.35; }
.obc-photo-caption strong { color: var(--navy); font-family: 'Montserrat', sans-serif; font-size: .82rem; white-space: nowrap; }

.obc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--obc-line); border-bottom: 1px solid var(--obc-line); }
.obc-metrics > div { background: #fff; padding: 16px 20px; }
.obc-metrics span { display: block; color: var(--obc-muted); font-size: .74rem; margin-bottom: 3px; }
.obc-metrics strong { font-family: 'Montserrat', sans-serif; color: var(--navy); font-size: 1.05rem; }

.obc-diagram { padding: 20px 22px 6px; }
.obc-diagram-title { display: flex; justify-content: space-between; color: var(--obc-muted); font-size: .72rem; margin-bottom: 8px; }
.obc-wall { height: 52px; display: flex; gap: 5px; padding: 7px; background: #EDF0F3; border-radius: 6px; overflow: hidden; }
.obc-module { position: relative; min-width: 5px; border-radius: 3px; background: linear-gradient(180deg, #2E8B47, var(--green-main)); }
.obc-module::after { content: ''; position: absolute; inset: 7px 6px; border-top: 2px solid rgba(255, 255, 255, .5); border-bottom: 2px solid rgba(255, 255, 255, .35); }
.obc-leftover { border-radius: 3px; background: repeating-linear-gradient(135deg, #D6DCE2 0, #D6DCE2 5px, #EEF1F4 5px, #EEF1F4 10px); }

.obc-warning { margin: 12px 22px 0; padding: 12px 14px; color: var(--obc-red); background: #FEF3F2; border: 1px solid #FECDCA; border-radius: 6px; font-size: .8rem; line-height: 1.5; }
.obc-warning[hidden] { display: none; }

.obc-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 18px 22px 12px; }
.obc-wa { justify-content: center; white-space: normal; text-align: center; padding-left: 20px; padding-right: 20px; }
.obc-wa:not([href]) { opacity: .5; pointer-events: none; }
.obc-btn-sec { display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; border: 1px solid var(--gray-mid); background: #fff; border-radius: var(--radius); color: var(--navy); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .78rem; cursor: pointer; }
.obc-btn-sec:hover { border-color: var(--green-main); color: var(--green-main); }
.obc-links { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 22px 20px; font-size: .8rem; }
.obc-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--green-main); }

.obc-foot { margin: 20px 0 0; text-align: center; color: var(--obc-muted); font-size: .8rem; }

@media (max-width: 900px) {
  .obc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .obc-inputs { padding: 20px; }
  .obc-fields { grid-template-columns: 1fr; }
  .obc-pill { display: none; }
  .obc-top { padding: 22px 20px; }
  .obc-capacity { font-size: 2.8rem; }
  .obc-metrics > div { padding: 14px 16px; }
  .obc-actions { grid-template-columns: 1fr; padding: 16px 18px 10px; }
  .obc-btn-sec { justify-content: center; padding: 12px; }
}
@media print {
  #orionbike-header, #orionbike-footer, .obc-inputs, .obc-actions, .obc-links, .ob-hero-interno { display: none !important; }
  .obc-grid { display: block; }
}