/* CC Quote - Add-to-Quote cart (public). Brand blue var(--cc-logo-blue / #407090), warm cream surfaces. */
.cc-atq {
  cursor: pointer;
  font: inherit;
}
.cc-atq-compact {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--cc-logo-blue, #407090);
  background: #fff;
  color: var(--cc-logo-blue, #407090);
  border-radius: 3px;
  font-weight: 600;
  transition:
    background 0.2s,
    color 0.2s;
}
.cc-atq-compact:hover {
  background: var(--cc-logo-blue, #407090);
  color: #fff;
}
.cc-atq-wrap {
  margin: 14px 0;
}

/* mini basket */
/* Stack the quote cart ABOVE the WhatsApp floater (pt-floater: 58px @ bottom:22px)
   so the two bottom-right FABs never overlap. 22 + 58 + 12 gap = 92px. */
.cc-mini {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 9990;
}
/* THE BASKET IS ALWAYS THERE NOW, and this reverses a decision of mine from earlier this
   month. It used to hide itself until the visitor had added something, on the reasoning
   that an empty basket is state chrome rather than a conversion action.
   The consequence is what Howard reported twice, 2026-09-15 and again 2026-09-16: "the
   bottom right widget still doesnt work". Measured in Chrome through Cloudflare, on
   desktop and on a 390px phone, both floaters work perfectly WHEN THEY ARE THERE: one
   click opens the quote panel, a second closes it, and the green button opens WhatsApp.
   With an empty basket the basket is not in the document at all, so the only thing in that
   corner is WhatsApp, and clicking it opens WhatsApp rather than a basket. Nothing was
   broken. The thing he was reaching for did not exist.
   Showing it costs nothing: the count badge still hides at zero, so an empty basket reads
   as a quiet outline and a full one carries the red number. */
.cc-mini {
  display: block;
}
.cc-mini-btn {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--cc-logo-blue, #407090);
  color: #fff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-mini-btn:hover {
  background: var(--cc-logo-blue-deep, #2f6379);
}
.cc-mini-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #b3261e;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-mini-panel {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: 260px;
  background: #fff;
  border: 1px solid #ece8e0;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  padding: 14px;
}
.cc-mini-head {
  font-weight: 700;
  margin-bottom: 8px;
  color: #1a1a1a;
}
.cc-mini-body {
  font-size: 14px;
  color: #555;
  margin-bottom: 12px;
}
.cc-mini-go {
  display: block;
  text-align: center;
}
.cc-mini:not(.has-items) .cc-mini-count {
  display: none;
}

/* toast */
.cc-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translate(-50%, 12px);
  background: #1a1a1a;
  color: #fff;
  padding: 12px 18px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  transition:
    opacity 0.3s,
    transform 0.3s;
  z-index: 9991;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2);
}
.cc-toast.in {
  opacity: 1;
  transform: translate(-50%, 0);
}
.cc-toast a {
  color: #9bc1ff;
  margin-left: 6px;
}

/* basket page */
.cc-basket {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 20px;
}
.cc-basket-title {
  font-size: 1.8rem;
  margin: 0 0 20px;
  color: #1a1a1a;
}
.cc-basket-empty {
  color: #555;
}
.cc-basket-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid #f0ebe3;
}
.cc-basket-row-main {
  flex: 1;
}
.cc-basket-name {
  margin-bottom: 6px;
}
.cc-basket-name small {
  color: #888;
}
.cc-basket-f {
  display: block;
  font-size: 13px;
  color: #555;
}
.cc-basket-f textarea {
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #d8d2c8;
  border-radius: 3px;
  resize: vertical;
}
.cc-basket-qtybox {
  display: flex;
  align-items: center;
  border: 1px solid #d8d2c8;
  border-radius: 3px;
  overflow: hidden;
  height: 38px;
}
.cc-basket-qtybox button {
  width: 34px;
  height: 38px;
  border: 0;
  background: #f4efe6;
  cursor: pointer;
  font-size: 16px;
}
.cc-basket-qtybox input {
  width: 54px;
  height: 38px;
  border: 0;
  border-left: 1px solid #ece8e0;
  border-right: 1px solid #ece8e0;
  text-align: center;
}
.cc-basket-del {
  border: 0;
  background: none;
  color: #b3261e;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.cc-basket-form {
  margin-top: 28px;
  border-top: 2px solid var(--cc-logo-blue, #407090);
  padding-top: 20px;
}
.cc-basket-h2 {
  font-size: 1.2rem;
  margin: 0 0 14px;
}
.cc-basket-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cc-basket-grid label,
.cc-basket-notes {
  display: block;
  font-size: 13px;
  color: #555;
}
.cc-basket-grid input,
.cc-basket-grid select,
.cc-basket-notes textarea {
  width: 100%;
  margin-top: 4px;
  padding: 10px 14px;
  border: 1px solid #d8d2c8;
  border-radius: 3px;
}
.cc-basket-notes {
  margin-top: 14px;
}
.cc-basket-req {
  font-size: 12px;
  color: #888;
  margin: 10px 0;
}
.cc-btn-large {
  padding: 12px 28px;
  font-size: 1rem;
}
@media (max-width: 600px) {
  .cc-basket-grid {
    grid-template-columns: 1fr;
  }
  .cc-basket-row {
    flex-wrap: wrap;
  }
}

/* Quote submit success / error states (2026-06-08) */
.cc-quote-success {
  max-width: 620px;
  margin: 48px auto;
  text-align: center;
  padding: 40px 28px;
  background: #fff;
  border: 1px solid #e7ecef;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(31, 77, 97, 0.08);
}
.cc-quote-success-ic {
  width: 64px;
  height: 64px;
  line-height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #407090;
  color: #fff;
  font-size: 34px;
  font-weight: 700;
}
.cc-quote-success h1 {
  font-size: 1.6rem;
  color: #1f4d61;
  margin: 0 0 12px;
}
.cc-quote-success p {
  color: #4a5b63;
  margin: 0 0 10px;
  line-height: 1.6;
}
.cc-quote-success-walead {
  font-weight: 600;
  color: #1f4d61 !important;
  margin-top: 18px !important;
}
.cc-quote-success .cc-wa-go {
  display: inline-block;
  margin: 14px 0 4px;
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #fff !important;
}
.cc-quote-success .cc-wa-go:hover {
  background: #1da851 !important;
  border-color: #1da851 !important;
}
.cc-quote-success-shop {
  display: block;
  margin-top: 14px;
  color: #407090;
  font-size: 0.92rem;
}
.cc-quote-error {
  max-width: 620px;
  margin: 24px auto;
  padding: 14px 18px;
  background: #fdecea;
  border: 1px solid #f5c6c2;
  border-radius: 10px;
  color: #a8332a;
  text-align: center;
}

.cc-toast-err {
  background: #9a3a32;
}

/* Quote-basket logo / artwork upload (2026-06-18). Mirrors the contact-form
   .pt-qf-upload-box dropzone, restyled in the cc-cart blue/cream palette. */
.cc-logo-upload {
  margin-top: 14px;
}
.cc-logo-upload-label {
  display: block;
  font-size: 13px;
  color: #555;
  margin-bottom: 6px;
}
.cc-logo-upload-box {
  position: relative;
  display: block;
  border: 1.5px dashed var(--cc-logo-blue, #407090);
  border-radius: 8px;
  padding: 18px 16px;
  background: #faf7f1;
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.cc-logo-upload-box:hover,
.cc-logo-upload-box.is-drag {
  border-color: var(--cc-logo-blue-deep, #2f6379);
  background: #fff;
}
.cc-logo-upload-box input[type="file"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cc-logo-upload-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--cc-logo-blue-deep, #2f6379);
}
.cc-logo-upload-cue svg {
  color: var(--cc-logo-blue, #407090);
}
.cc-logo-upload-text {
  font-size: 14px;
  font-weight: 600;
}
.cc-logo-upload-hint {
  font-size: 11px;
  color: #888;
  letter-spacing: 0.04em;
}
.cc-logo-upload-list {
  margin-top: 8px;
  font-size: 13px;
  color: #555;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-logo-upload-list .cc-file-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #ece8e0;
  border-radius: 4px;
  width: fit-content;
}

/* Line-item preview inside both basket panels, 2026-09-16. Howard: "show a preview of what
   the customer is buying so they can verify". */
.cc-mini-panel { width: 320px; max-width: calc(100vw - 44px); }
.cc-mini-rows { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.cc-mini-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0ece4;
}
.cc-mini-row:last-child { border-bottom: 0; }
.cc-mini-thumb {
  width: 40px; height: 40px; border-radius: 4px; object-fit: cover;
  background: #f4f1ea; display: block;
}
.cc-mini-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-mini-name {
  font-size: 13px; line-height: 1.35; color: #1a1a1a; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cc-mini-name:hover { text-decoration: underline; }
.cc-mini-note { font-size: 11px; color: #8a8a8a; }
.cc-mini-qty { font-size: 13px; font-weight: 700; color: #14395f; white-space: nowrap; }
.cc-mini-more, .cc-mini-empty { font-size: 12px; color: #6b7280; padding: 8px 0 0; }
.cc-mini-sum {
  font-size: 12px; color: #14395f; font-weight: 600;
  padding-top: 8px; margin-top: 6px; border-top: 1px solid #ece8e0;
}