/* ==========================================================================
   cost-estimator.css — Packaging Cost Estimator tool page
   Uses TrackPackaging theme (Poppins, --tp-green). Classes prefixed `pce-`
   so they never clash with Bootstrap. Self-contained + responsive.
   ========================================================================== */

.pce {
  --pce-green-50: #eef6f0;
  --pce-green-100: #e3f1e8;
  --pce-line: #e5e7eb;
  --pce-line-2: #eef2ef;
  --pce-ink-2: #3a4a42;
  --pce-kraft-50: #f7efe2;
}

/* ---- hero ---- */
.pce-hero { padding-top: 0.5rem; padding-bottom: 1.5rem; }

.pce-crumb {
  display: flex; gap: 0.4rem; align-items: center;
  font-size: 0.85rem; color: var(--tp-muted); margin-bottom: 1.1rem;
}
.pce-crumb a:hover { color: var(--tp-green); }
.pce-crumb .sep { color: #c2c8c4; }

.pce-hero__title {
  margin: 0.8rem 0 0.75rem;
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--tp-text);
}
.pce-hero__lead { margin: 0; font-size: 1.06rem; color: var(--tp-muted); max-width: 46ch; }

.pce-trust { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.pce-trust .pill {
  display: flex; gap: 0.65rem; align-items: center;
  background: var(--tp-white); border: 1px solid var(--pce-line);
  border-radius: 0.75rem; padding: 0.7rem 0.9rem;
}
.pce-trust .pill .ic {
  width: 32px; height: 32px; border-radius: 0.55rem; flex: none;
  background: var(--pce-green-50); color: var(--tp-green); display: grid; place-items: center;
}
.pce-trust .pill b { font-size: 0.82rem; font-weight: 600; display: block; line-height: 1.2; }
.pce-trust .pill span { font-size: 0.72rem; color: var(--tp-muted); }

.pce-hero__art {
  width: 100%; height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(9, 119, 54, 0.10));
}

/* ---- tool cards ---- */
.pce-card {
  display: flex; flex-direction: column;
  background: var(--tp-white); border: 1px solid var(--pce-line);
  border-radius: 1rem; box-shadow: 0 1px 2px rgba(20, 32, 25, 0.05); height: 100%;
}
.pce-card__body { flex: 1; display: flex; flex-direction: column; }
.pce-note { margin-top: auto; }   /* keep the closing note pinned to the bottom */
.pce-card__head {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--pce-line-2);
}
.pce-card__head .step {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background-image: var(--tp-green-gradient); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 0.82rem;
}
.pce-card__head h2 { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--tp-text); }
.pce-card__head .head-cta { margin-left: auto; }
.pce-card__body { padding: 1.3rem; }

/* ---- form ---- */
.pce-field { margin-bottom: 1.1rem; }
.pce-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pce-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* ---- packaging-type visual picker ---- */
.pce-typewrap { position: relative; }
.pce-typegrid {
  display: flex; gap: 0.6rem;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px 2px 6px;
  scrollbar-width: none;            /* Firefox — hide bar, keep scroll */
  -ms-overflow-style: none;         /* old Edge/IE */
}
.pce-typegrid::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
/* subtle right-edge fade to hint that the row scrolls */
.pce-typewrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 10px; width: 30px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--tp-white));
  pointer-events: none; border-radius: 0 0.8rem 0.8rem 0;
}
.pce-type {
  position: relative; flex: 0 0 calc((100% - 3 * 0.6rem) / 4); min-width: 100px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  padding: 0.75rem 0.4rem 0.65rem; text-align: center; cursor: pointer;
  background: var(--tp-white); border: 1.5px solid var(--pce-line);
  border-radius: 0.85rem; transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
}
.pce-type:hover { border-color: #bcdfcb; box-shadow: 0 6px 16px rgba(9, 119, 54, 0.08); transform: translateY(-2px); }
.pce-type:focus-visible { outline: 2px solid var(--tp-green); outline-offset: 2px; }
.pce-type__ic { width: 52px; height: 52px; display: grid; place-items: center; }
.pce-type__ic svg { width: 46px; height: 46px; display: block; }
.pce-type__ic img { width: 52px; height: 52px; object-fit: contain; display: block; }
.pce-type__lbl { font-size: 0.72rem; font-weight: 600; line-height: 1.2; color: var(--pce-ink-2); }
.pce-type.is-on {
  border-color: var(--tp-green);
  background: linear-gradient(160deg, #f3fbf6, #eaf6ef);
  box-shadow: 0 8px 20px rgba(9, 119, 54, 0.14);
}
.pce-type.is-on .pce-type__lbl { color: var(--tp-green); }
.pce-type.is-on::after {
  content: ""; position: absolute; top: 8px; right: 9px;
  width: 6px; height: 11px; border: solid var(--tp-green);
  border-width: 0 2.4px 2.4px 0; transform: rotate(45deg);
}

/* ---- add-ons: multi-select checkbox chips ---- */
.pce-addons {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 0.6rem;
}
.pce-addon {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.8rem; border-radius: 0.7rem;
  background: #f3f4f6; border: 1.5px solid transparent;
  font-size: 0.8rem; line-height: 1.25; color: var(--pce-ink-2);
  cursor: pointer; transition: background .16s, border-color .16s;
}
.pce-addon:hover { background: #eceef0; }
.pce-addon input {
  width: 16px; height: 16px; flex: none; margin: 0;
  accent-color: var(--tp-green); cursor: pointer;
}
.pce-addon .nm { font-weight: 500; }
.pce-addon .pr { color: var(--tp-green); font-weight: 600; white-space: nowrap; }
.pce-addon:has(input:checked) {
  background: var(--pce-green-50); border-color: var(--tp-green);
}
.pce-lbl {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.82rem; font-weight: 600; color: var(--tp-text); margin-bottom: 0.4rem;
}
.pce-lbl .q {
  width: 15px; height: 15px; border-radius: 50%; background: var(--pce-line);
  color: var(--tp-muted); font-size: 0.62rem; display: grid; place-items: center;
  cursor: help; font-weight: 700;
}
.pce select, .pce input[type=number] {
  width: 100%; font-family: inherit; font-size: 0.92rem; color: var(--tp-text);
  padding: 0.65rem 0.75rem; border: 1.4px solid var(--pce-line);
  border-radius: 0.55rem; background: var(--tp-white);
  transition: border-color 0.15s, box-shadow 0.15s; appearance: none;
}
.pce select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.pce select:focus, .pce input:focus {
  outline: none; border-color: var(--tp-green); box-shadow: 0 0 0 3px var(--pce-green-100);
}
.pce-dim-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 0.75rem; align-items: stretch; }
.pce-dim-row .pce-lbl { font-size: 0.72rem; color: var(--tp-muted); font-weight: 500; }
.pce-unit {
  display: inline-flex; border: 1.4px solid var(--pce-line); border-radius: 0.55rem;
  overflow: hidden; height: auto;   /* stretches to match the number inputs' height */
}
.pce-unit button {
  border: none; background: var(--tp-white); color: var(--tp-muted);
  font-family: inherit; font-weight: 600; font-size: 0.86rem; padding: 0 0.9rem; cursor: pointer;
}
.pce-unit button.on { background-image: var(--tp-green-gradient); color: #fff; }
.pce-qty { position: relative; }
.pce-qty .suffix {
  position: absolute; right: 4px; top: 4px; bottom: 4px; display: grid; place-items: center;
  padding: 0 0.7rem; background: var(--pce-green-50); color: var(--tp-green);
  font-weight: 600; font-size: 0.78rem; border-radius: 0.4rem; pointer-events: none;
}
.pce-qty input { padding-right: 50px; }
.pce-hint { font-size: 0.68rem; color: var(--tp-muted); margin-top: 0.4rem; }

/* quantity range slider */
.pce-qtyval { margin-left: auto; font-weight: 700; font-size: 0.82rem; color: var(--tp-green); }
.pce-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 6px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--tp-green) 0%, var(--pce-green-100) 100%);
}
.pce-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background-image: var(--tp-green-gradient); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(9, 119, 54, 0.35); cursor: pointer;
}
.pce-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--tp-green); border: 3px solid #fff; cursor: pointer;
}
.pce-range-ends {
  display: flex; justify-content: space-between;
  margin-top: 0.4rem; font-size: 0.72rem; color: var(--tp-muted);
}

/* disabled / not-applicable field */
.pce-field.is-na { opacity: 0.55; }
.pce select:disabled, .pce input:disabled {
  background: #f3f4f6; color: #9ca3af; cursor: not-allowed; border-color: var(--pce-line);
}
.pce option:disabled { color: #c0c5c2; }
.pce-err { color: #b4452f; font-size: 0.78rem; margin-top: 0.5rem; display: none; }
.pce-err.show { display: block; }

.pce-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.75rem; margin-top: 0.4rem; }
.pce-privacy {
  display: flex; gap: 0.5rem; align-items: center; color: var(--tp-muted);
  font-size: 0.78rem; margin-top: 1rem;
}

/* ---- result ---- */
.pce-res-preview {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--pce-line-2); margin-bottom: 1.1rem;
}
.pce-res-thumb {
  width: 188px; height: 150px; border-radius: 0.75rem; flex: none;
  background: linear-gradient(160deg, #fdfcf9, #f6f1e8); border: 1px solid var(--pce-line);
  display: grid; place-items: center; overflow: hidden;
}
.pce-res-thumb svg { width: 100%; height: 100%; }       /* dimension diagram fills the box */
.pce-res-thumb img { width: 70%; height: 70%; object-fit: contain; }   /* type photo (no dims yet) */
.pce-res-summary { flex: 1; min-width: 180px; }
.pce-res-summary h3 { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--tp-text); }
.pce-res-summary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.pce-res-summary li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.84rem; color: var(--pce-ink-2); }
.pce-res-summary li .tick { color: var(--tp-green); flex: none; font-weight: 700; }

.pce-bd-title {
  display: flex; justify-content: space-between; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--tp-muted); font-weight: 700; padding: 0 2px 0.6rem;
}
.pce-bd-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.65rem 2px; border-top: 1px solid var(--pce-line-2); font-size: 0.9rem;
}
.pce-bd-row .k { color: var(--pce-ink-2); }
.pce-bd-row .k small { display: block; color: var(--tp-muted); font-size: 0.72rem; }
.pce-bd-row .v { font-weight: 600; color: var(--tp-text); font-variant-numeric: tabular-nums; }
.pce-bd-row.total { border-top: 1.6px solid var(--tp-text); margin-top: 0.25rem; padding-top: 0.85rem; }
.pce-bd-row.total .k { font-weight: 700; font-size: 1rem; color: var(--tp-text); }
.pce-bd-row.total .v { font-size: 1.1rem; font-weight: 700; }

.pce-bd-foot {
  background: var(--pce-green-50); border: 1px solid var(--pce-green-100);
  border-radius: 0.75rem; padding: 0.9rem 1rem; margin-top: 1rem; display: grid; gap: 0.5rem;
}
.pce-bd-foot .line { display: flex; justify-content: space-between; align-items: center; }
.pce-bd-foot .line .k { color: var(--tp-green-dark); font-weight: 600; font-size: 0.92rem; }
.pce-bd-foot .line .v { font-weight: 700; color: var(--tp-green-dark); font-variant-numeric: tabular-nums; }
.pce-bd-foot .line.big .k { font-size: 1rem; }
.pce-bd-foot .line.big .v { font-size: 1.18rem; }

.pce-res-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.1rem; }
.pce-note { font-size: 0.76rem; color: var(--tp-muted); margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--pce-line-2); }
.pce-note b { color: var(--pce-ink-2); }
.pce-moq {
  display: none; margin-top: 0.75rem; background: var(--pce-kraft-50);
  border: 1px solid #ecd9b8; color: #a87d44; font-size: 0.8rem; padding: 0.6rem 0.75rem; border-radius: 0.6rem;
}
.pce-moq.show { display: block; }

/* ---- tool buttons (scoped, gradient theme) ---- */
.pce-btn {
  font-family: inherit; font-weight: 600; font-size: 0.92rem; padding: 0.75rem 1rem;
  border-radius: 0.55rem; cursor: pointer; border: 1.4px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: background-image 0.15s, transform 0.05s, border-color 0.15s, color 0.15s;
}
.pce-btn:active { transform: translateY(1px); }
.pce-btn-primary { background-image: var(--tp-green-gradient); color: #fff; }
.pce-btn-primary:hover { background-image: var(--tp-green-gradient-hover); color: #fff; }
.pce-btn-ghost { background: var(--tp-white); color: var(--tp-text); border-color: var(--pce-line); }
.pce-btn-ghost:hover { border-color: var(--tp-green); color: var(--tp-green); }
.pce-btn-sm { font-size: 0.8rem; padding: 0.45rem 0.7rem; }

/* ---- how it works / more tools (reuse light cards) ---- */
.pce-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; }
.pce-step {
  background: var(--pce-green-50); border: 1px solid var(--pce-green-100);
  border-radius: 0.75rem; padding: 1.1rem;
}
.pce-step .n {
  width: 30px; height: 30px; border-radius: 0.5rem; background: var(--pce-green-100);
  color: var(--tp-green-dark); display: grid; place-items: center; font-weight: 700; margin-bottom: 0.7rem;
}
.pce-step h4 { margin: 0 0 0.3rem; font-size: 0.96rem; font-weight: 600; color: var(--tp-text); }
.pce-step p { margin: 0; font-size: 0.82rem; color: var(--tp-muted); }

.pce-more { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
.pce-more a {
  background: var(--tp-white); border: 1px solid var(--pce-line); border-radius: 0.75rem;
  padding: 1rem; transition: border-color 0.15s, transform 0.1s;
}
.pce-more a:hover { border-color: var(--tp-green); transform: translateY(-2px); }
.pce-more a b { font-size: 0.9rem; display: block; margin-bottom: 0.2rem; color: var(--tp-text); }
.pce-more a span { font-size: 0.76rem; color: var(--tp-muted); }

/* ---- printable quote ---- */
#quote-sheet { display: none; }
@media print {
  /* show ONLY the quote sheet — hide everything else so it prints on a single page */
  body > *:not(#quote-sheet) { display: none !important; }
  #quote-sheet {
    display: block; position: static;
    color: #1f2937; font-family: "Poppins", Arial, sans-serif;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  .qs { position: relative; padding: 30px 40px; }
  .qs-watermark {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-26deg);
    font-size: 104px; font-weight: 800; letter-spacing: 2px;
    color: #097736; opacity: 0.045; white-space: nowrap; z-index: 0;
  }
  .qs-doc { position: relative; z-index: 1; }

  .qs-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    border-bottom: 3px solid #097736; padding-bottom: 16px;
  }
  .qs-brand { display: flex; gap: 12px; align-items: center; }
  .qs-logo { width: 42px; height: 42px; }
  .qs-name { font-size: 22px; font-weight: 700; color: #097736; line-height: 1.1; }
  .qs-tag { font-size: 9.5px; color: #6b7280; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }
  .qs-meta { text-align: right; font-size: 10.5px; color: #6b7280; line-height: 1.7; }
  .qs-meta b { color: #9ca3af; font-weight: 600; margin-right: 4px; text-transform: uppercase; font-size: 9px; letter-spacing: .5px; }
  .qs-title { font-size: 18px; font-weight: 700; color: #1f2937; margin-bottom: 6px; }

  .qs-sub { margin: 12px 0 4px; font-size: 11px; color: #6b7280; }

  .qs h3 {
    font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
    color: #097736; margin: 22px 0 10px; font-weight: 700;
  }

  .qs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .qs-cell { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid #eef2ef; padding: 7px 0; }
  .qs-cell span { font-size: 9px; color: #9ca3af; text-transform: uppercase; letter-spacing: .5px; }
  .qs-cell b { font-size: 12.5px; color: #1f2937; font-weight: 600; }
  .qs-cell--wide { grid-column: 1 / -1; }

  .qs-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
  .qs-table thead th {
    background: #097736; color: #fff; font-size: 10.5px; font-weight: 600;
    text-align: left; padding: 9px 12px; text-transform: uppercase; letter-spacing: .5px;
  }
  .qs-table thead th:last-child, .qs-table tbody td:last-child { text-align: right; }
  .qs-table thead th:nth-child(2), .qs-table tbody td:nth-child(2) { text-align: center; color: #6b7280; }
  .qs-table tbody td { padding: 9px 12px; font-size: 12px; border-bottom: 1px solid #eef2ef; }
  .qs-table tbody tr:nth-child(even) td { background: #f6faf7; }
  .qs-table tbody td:last-child { font-weight: 600; font-variant-numeric: tabular-nums; color: #1f2937; }

  .qs-totals { margin-top: 14px; }
  .qs-perpc { display: flex; justify-content: space-between; padding: 4px 12px; font-size: 12px; color: #374151; }
  .qs-perpc b { font-weight: 600; }
  .qs-grand {
    display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
    background: #eaf6ef; border: 1.5px solid #097736; border-radius: 10px;
    padding: 13px 16px; font-size: 16px; font-weight: 700; color: #097736;
  }

  .qs-note {
    margin-top: 18px; font-size: 9.5px; color: #6b7280; line-height: 1.6;
    border-top: 1px solid #eee; padding-top: 10px;
  }
  .qs-foot {
    margin-top: 14px; display: flex; justify-content: space-between;
    font-size: 9.5px; color: #9ca3af; border-top: 1px solid #eee; padding-top: 10px;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
  .pce-steps { grid-template-columns: repeat(2, 1fr); }
  .pce-more { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  /* show ~3.5 tiles per view so it's clear the row scrolls */
  .pce-type { flex-basis: calc((100% - 3 * 0.6rem) / 3.4); min-width: 86px; }
}
@media (max-width: 575.98px) {
  .pce-row2, .pce-row3 { grid-template-columns: 1fr; }
  .pce-dim-row { grid-template-columns: 1fr 1fr; }
  .pce-unit { grid-column: 1 / -1; }
  .pce-actions, .pce-res-actions { grid-template-columns: 1fr; }
  .pce-more { grid-template-columns: 1fr; }
  .pce-type { flex-basis: calc((100% - 2 * 0.6rem) / 2.6); min-width: 82px; }
}