/* =========================================================
   Infome Quote Cart styles
   Used by: template/header.php, views/quote_cart.php,
   and any "Add to Quote" buttons on Home / Brand / Category /
   Product pages.
   ========================================================= */

/* ---------- Header top row (logo + cart + hamburger) ---------- */
/* .navbar is already display:flex (Bootstrap). We don't move any elements
   in the DOM — we just reorder them with `order`, so the nav-links list
   (.navbar-collapse) can never push the cart icon or hamburger toggle onto
   a second line, on any breakpoint. */
.qc-navbar-flex {
  flex-wrap: wrap;
}

.qc-navbar-flex > .navbar-brand   { order: 1; }
.qc-navbar-flex > .qc-cart-wrapper { order: 2; }
.qc-navbar-flex > .navbar-toggler { order: 3; }
.qc-navbar-flex > .navbar-collapse { order: 4; }

@media (min-width: 992px) {
  /* Desktop: restore the original order — nav links inline right after the
     logo, cart icon last (far right), toggler is hidden by Bootstrap anyway. */
  .qc-navbar-flex > .navbar-collapse { order: 2; }
  .qc-navbar-flex > .qc-cart-wrapper { order: 3; }
}

.qc-cart-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
}

@media (max-width: 991px) {
  .qc-cart-wrapper {
    margin-left: auto;
    margin-right: 12px;
  }
}

.qc-cart-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #eee;
  color: #a30000;
  font-size: 18px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.qc-cart-icon-btn:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

.qc-cart-icon-btn.qc-bump {
  animation: qcBump .4s ease;
}

@keyframes qcBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.qc-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #a30000;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
  display: none;
}

/* ---------- Mini cart dropdown ---------- */
.qc-mini-cart {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-width: 90vw;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0,0,0,.16);
  border: 1px solid #eee;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 2000;
}

.qc-mini-cart.qc-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* On mobile, anchoring to the icon's right edge can push the dropdown
   partly off-screen (or under other content) depending on where the icon
   ends up in the header. Pin it to the viewport instead so it always
   renders fully visible, centered, above everything else. */
@media (max-width: 575px) {
  .qc-mini-cart {
    position: fixed;
    top: 70px;
    left: 50%;
    right: auto;
    transform: translate(-50%, 6px);
    width: 92vw;
    max-width: 360px;
  }

  .qc-mini-cart.qc-open {
    transform: translate(-50%, 0);
  }
}

.qc-mini-cart-head {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f1f1;
  font-weight: 700;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qc-mini-cart-body {
  max-height: 300px;
  overflow-y: auto;
  padding: 6px 8px;
}

.qc-mini-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
}

.qc-mini-item:hover {
  background: #fafafa;
}

.qc-mini-item-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #333;
  text-decoration: none;
  min-width: 0;
}

.qc-mini-item-link img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #eee;
  background: #fff;
  flex-shrink: 0;
}

.qc-mini-item-name {
  font-size: 13px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qc-mini-item-remove {
  border: none;
  background: transparent;
  color: #999;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}

.qc-mini-item-remove:hover {
  color: #a30000;
}

.qc-mini-cart-empty {
  padding: 24px 16px;
  text-align: center;
  color: #888;
  font-size: 14px;
}

.qc-mini-cart-footer {
  padding: 12px 16px;
  border-top: 1px solid #f1f1f1;
}

.qc-mini-cart-footer .btn {
  width: 100%;
}

/* ---------- Add to Quote button state ---------- */
.add-to-quote-btn.qc-in-cart {
  background: #1e8e3e !important;
  border-color: #1e8e3e !important;
  color: #fff !important;
}

/* ---------- Toast ---------- */
.qc-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 20px);
  background: #222;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  z-index: 2000;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.qc-toast i {
  color: #4CAF50;
  margin-right: 6px;
}

.qc-toast-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Quote Cart page: shared flow card ----------
   Deliberately NOT using Bootstrap .row/.col-* here: this project has
   several overriding stylesheets that redefine .row/.col-lg-* margins
   and padding, which caused the list column to be clipped/offset.
   Plain flexbox with its own class names avoids that collision. */
.qc-flow-card {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
}

.qc-flow-col {
  box-sizing: border-box;
  padding: 32px;
}

.qc-flow-col-list {
  flex: 1 1 60%;
  min-width: 320px;
  background: #fafafa;
  border-radius: 14px 0 0 14px;
}

.qc-flow-col-form {
  flex: 1 1 40%;
  min-width: 320px;
  border-left: 1px solid #eee;
}

/* Stack on narrow screens, switch the divider from vertical to horizontal */
@media (max-width: 900px) {
  .qc-flow-col-list,
  .qc-flow-col-form {
    flex-basis: 100%;
  }
  .qc-flow-col-list {
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid #eee;
  }
  .qc-flow-col-form {
    border-left: none;
    border-radius: 0 0 14px 14px;
  }
}

/* Live "Requesting a quote for N items" strip, ties the form to the list above it */
.qc-form-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff5f5;
  border: 1px solid #f3d4d4;
  color: #a30000;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.qc-form-summary-empty {
  background: #f5f5f5;
  border-color: #eee;
  color: #999;
}

/* ---------- Quote Cart page ---------- */
.qc-page-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid #eee;
  border-radius: 10px;
  margin-bottom: 12px;
  background: #fff;
}

.qc-page-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.qc-page-item-name {
  font-weight: 600;
  color: #222;
  flex-grow: 1;
}

.qc-page-item-remove {
  border: none;
  background: transparent;
  color: #a30000;
  font-size: 20px;
  cursor: pointer;
}

.qc-page-empty {
  text-align: center;
  padding: 60px 20px;
  color: #888;
}

.qc-page-empty i {
  font-size: 42px;
  color: #ddd;
  margin-bottom: 12px;
  display: block;
}