/* predictor-style.css - layout and styling for CompareCCTV predictor */

/* Container */
.cctv-predictor {
  max-width: 980px;
  margin: 12px auto;
  padding: 18px;
  background: #fff;
  border: 1px solid #e8eef8;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #0f172a;
}

/* Headings */
.cctv-predictor h3 { margin:0 0 14px; font-size:18px; }

/* Actions */
.cctv-predictor .actions { margin-top:14px; }
.cctv-predictor button {
  background:#000;                /* changed from blue to black */
  color:#fff;
  border:0;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  transition: background-color 0.25s ease;
}
.cctv-predictor button:hover {
  background:#333;                /* slightly lighter black on hover */
}
.cctv-predictor button.back {
  background:#222;                /* darker gray for back button */
  color:#fff;
  padding:8px 12px;
  border:1px solid #444;
  margin-right:8px;
}
.cctv-predictor button.back:hover {
  background:#444;                /* hover effect for back */
}

/* Option groups (2 columns) */
.option-group, .camera-options, .connect-options {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:space-between;
  margin-top:10px;
}

/* Each card (half width on desktop) */
.camera-card, .option-item, .connect-card {
  width: calc(50% - 8px); /* two cards per row with gap */
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#fff;
  border:1px solid #e9eef7;
  border-radius:10px;
  padding:10px;
  text-align:center;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Selected visual */
.camera-card.selected, .option-item.selected, .connect-card.selected, label.selected {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(37,99,235,0.12);
  border-color: rgba(37,99,235,0.18);
}

/* Image on top */
.camera-thumb, .option-image, .connect-thumb {
  width:100%;
  height:260px !important;
  object-fit:cover;
  border-radius:8px;
  display:block;
  margin-bottom:10px;
  background:#f7fafc;
}

/* Labels under image */
.camera-label, .connect-label {
  font-weight:700;
  margin-bottom:6px;
}

/* Radio centered under label */
.camera-card input[type="radio"], .option-item input[type="radio"], .connect-card input[type="radio"] {
  margin:8px 0;
  transform:scale(1.05);
}

/* Quantity input area */
.camera-qty { margin-top:8px; }
.camera-qty input[type="number"] { width:90px; padding:6px 8px; border-radius:8px; border:1px solid #d1d5db; }

/* Summary */
#cctv-summary .summary-block { background:#fbfdff; border:1px solid #e6f0ff; padding:12px; border-radius:8px; margin-top:8px; }
#cctv-summary .summary-block .grand { margin-top:8px; color:#0b61d1; font-size:18px; font-weight:800; }

/* Installer cards */
.installer-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:12px;
  margin-top:12px;
}
.installer-card {
  border-radius:10px;
  overflow:hidden;
  border:1px solid #e9eef7;
  background:#fff;
  display:flex;
  flex-direction:column;
  box-shadow:0 6px 18px rgba(18,37,78,0.03);
}
.installer-thumb-wrap { width:100%; height:150px; background:#f6f7fb; }
.installer-thumb { width:100%; height:100%; object-fit:cover; display:block; }
.installer-body { padding:10px; display:flex; flex-direction:column; gap:8px; min-height:110px; }
.installer-name { font-weight:700; color:#0b1220; }
.installer-rating { color:#0b61d1; font-weight:700; }
.installer-address, .installer-phone { color:#475569; font-size:13px; }
.installer-actions { margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; }
.installer-action-btn {
  background:#000;              /* changed from blue to black */
  color:#fff;
  padding:8px 10px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  transition: background-color 0.25s ease;
}
.installer-action-btn:hover {
  background:#333;              /* lighter black on hover */
}


/* Map box */
#cctv-map { margin-top:12px; border-radius:8px; overflow:hidden; border:1px solid #e9eef7; }

/* Loading text */
.cctv-predictor .loading { color:#6b7280; }

/* Responsive behavior */
@media (max-width: 820px) {
  .camera-card, .option-item, .connect-card { width: 48%; }
  .camera-thumb, .option-image, .connect-thumb { height:120px; }
}
@media (max-width: 520px) {
  .camera-card, .option-item, .connect-card { width: 100%; }
  .camera-thumb, .option-image, .connect-thumb { height:110px; }
  .cctv-predictor { padding:12px; }
}

/* === Force larger predictor images (override other rules) === */
.cctv-predictor .camera-thumb,
.cctv-predictor img.camera-thumb,
.cctv-predictor .option-image,
.cctv-predictor img.option-image,
.cctv-predictor .connect-thumb,
.cctv-predictor img.connect-thumb {
  height: 220px !important;
  max-height: none !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Installer card images — make them match (taller) */
.cctv-predictor .installer-thumb-wrap {
  height: 260px !important;
}
.cctv-predictor .installer-thumb,
.cctv-predictor img.installer-thumb {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Ensure responsive breakpoints scale images down smoothly */
@media (max-width: 820px) {
  .cctv-predictor .camera-thumb,
  .cctv-predictor .option-image,
  .cctv-predictor .connect-thumb,
  .cctv-predictor .installer-thumb {
    height: 200px !important;
  }
  .cctv-predictor .installer-thumb-wrap { height: 200px !important; }
}
@media (max-width: 520px) {
  .cctv-predictor .camera-thumb,
  .cctv-predictor .option-image,
  .cctv-predictor .connect-thumb,
  .cctv-predictor .installer-thumb {
    height: 140px !important;
  }
  .cctv-predictor .installer-thumb-wrap { height: 140px !important; }
}