/* Neutral defence theme: olive + navy + airforce blue accents */
:root{
  --olive:#3c5422;
  --navy:#0b63d6;
  --air:#5aa0d8;
  --muted:#6b7280;
  --bg:#f7fbff;
  --card:#ffffff;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
}
body{margin:0;background:var(--bg);color:#0b1726;padding:18px}

.topbar{max-width:980px;margin:0 auto;padding:12px}

.container{max-width:980px;margin:12px auto;background:var(--card);padding:16px;border-radius:10px;box-shadow:0 6px 20px rgba(12,25,52,0.06);overflow: hidden;} /* prevent visual overflow */

h1{font-size:25px;margin:0;text-transform:uppercase;color:var(--olive); text-align: center;}

.subtitle{font-size:12px;color:var(--muted);margin-bottom:18px;text-align: center}

.form{display:flex;flex-direction:column;gap:6px}

label{font-size:21px}

input,select{width:40%;padding:10px;border-radius:8px;border:1px solid #e6eefc;font-size:20px}

.controls{display:flex;gap:28px;margin-top:10px}

.btn{background:var(--navy);color:#fff;padding:10px;border-radius:8px;border:none;cursor:pointer; font-size:30px;transition:background 0.3s}
.btn.secondary{background:var(--muted)}

.image-area{margin-top:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.image-box{width:360px;height:75px;border:1px dashed #cfe3ff;border-radius:1px;overflow:hidden, right 0; top 0;}

.image-box img{width:100%;height:100%;object-fit:cover}

.ad-slot{background:#f1f5f9;border:1px dashed #cbd5e1;padding:8px;border-radius:6px;text-align:center;color:#475569;margin-top:10px}

.ad-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

.results{margin-top:12px;border-radius:8px;padding:10px;background:#fff;border:1px solid #e6f0ff}

table{width:100%;border-collapse:collapse}

th,td{padding:8px;border-bottom:1px solid #eef4ff;text-align:left}

.factor-wrap{max-height:200px;overflow:auto;border:1px solid #eef4ff;padding:8px;border-radius:6px;background:#fff}

.small{font-size:12px;color:var(--muted)}

.note-row{display:flex;justify-content:space-between; font-size: 13px;}
.highlight{font-weight:700;color:var(--air)}

.red-arrow{color:red;font-size:18px;margin-left:6px}

.footer-note{font-size:12px;color:var(--muted);margin-top:12px;max-width:980px;margin-left:auto;margin-right:auto}

.popup-ad{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);z-index:9999}

.popup-inner{background:#fff;padding:16px;border-radius:8px;max-width:420px;width:90%}
/*
@media(max-width:640px){
  .image-box{width:100%;height:160px}
  .note-row{flex-direction:le;gap:6px}
}*/
/* ------------- Form + Image Row Layout ------------- */
/* row: form left, image right */
.form-image-row{
  display: flex;
  gap: 18px;
  align-items: flex-start;   /* align top edges */
  justify-content: space-between;
  margin-top: 12px;
  flex-wrap: nowrap;         /* don't wrap unless small screen */
}

/* Left (form) takes remaining space */
.form-image-row .form-side{
  flex: 2 31 80%;
  min-width: 160px;      /* don't shrink too small */
}

/* Right (image) fixed but limited width and prevents overflow */
.form-image-row .image-side{
  flex: 0 0 260px;       /* fixed width column: adjust to 200-300px as needed */
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* Right (image) fixed but limited width and prevents overflow */
.form-image-row .image-side{
  flex: 0 0 260px;       /* fixed width column: adjust to 200-300px as needed */
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* Make image scale to fit the box and prevent overflow */
.form-image-row .image-side .image-box img{
  width: 100%;
  height: auto;
  object-fit: cover;     /* crop if necessary while keeping aspect */
  display: block;
}

/* mobile: stack vertically (form above image) for small screens */
/* If screen is small — stack vertically */
@media (max-width: 820px){
  .form-image-row{
    flex-direction: column;
    gap: 12px;
  }
  .form-image-row .image-side{
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }
  .form-image-row .image-side .image-box{
    max-height: 360px;
  }
}
/* === Grand Total Row Styling === */
#resultTable tr:last-child th {
  background-color: #f9f9f9;     /* light grey background */
  font-weight: bold;             /* bold text */
  color: #222;                   /* darker text */
  border-top: 2px solid #333;    /* clear separation line */
  text-align: right;             /* align amount nicely */
  padding: 8px;
}

/* Optional: Add slight shadow or highlight effect */
#resultTable tr:last-child {
  box-shadow: inset 0 1px 0 #ddd;
}

/* ✅ If you want the Grand Total to stay visible even when scrolling */
#resultTable tfoot th {
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 2;
}