/* compare-mini.css — styles for the floating compare bar */

/* Bar */
/* Belka główna – wyśrodkowana, max 60% szerokości na desktopie */
.qs-compare-bar{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  color: #fff;
  border-radius: 6px;
  padding-left: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);

  width: 60%;
  max-width: 1100px; /* można dostosować, żeby nie była za szeroka */
  min-width: 500px;

}


/* Pills (now slimmer & taller cards) */
.qs-compare-pills{ 
display:flex; 
flex-wrap:wrap; 
gap:10px; 
max-width:70%
}
.qs-compare-pill-wrap{
  position:relative;
  width:120px; 
height:150px;      /* węższe i wyższe */
  display:flex; 
flex-direction:column; 
align-items:center; 
justify-content:flex-start;
  background:#ebeaea; 
border:0; 
border-radius:6px; 
padding:8px;
color: black;
}
.qs-compare-thumb{
  width:100px; height:100px; object-fit:cover; border-radius:6px; display:block;
}
.qs-compare-pill{
  margin-top:6px; 
line-height:1.2; 
text-align:center; 
max-width:100%;
  white-space:nowrap; 
overflow:hidden; 
text-overflow:ellipsis;
font-weight: bold;
}

/* Remove button in top-right corner of card */
.qs-compare-pill-remove{
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: 0;
  color: #C20019;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  font-size: 30px;
}

/* Right actions: Clear • Add/Remove • Compare */
.qs-compare-actions-right{ display:flex; gap:8px; margin-left:auto }
.qs-compare-actions-right button{
  appearance:none; -webkit-appearance:none; border:none; outline:0;
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap; font:inherit; font-weight:600;
  padding:10px 30px; min-height:40px; line-height:1.2;
  border-radius:6px; cursor:pointer;
}
.qs-compare-view{ background:#C20019;; color:#ffffff; text-transform: uppercase; }
.qs-compare-clear{ background:#252a35; color:#ffffff; border:1px solid #444; text-transform: uppercase; }
.qs-compare-toggle{ background:#cccccc; color:#000000; text-transform: uppercase; }
.qs-compare-toggle.is-added{ background:#cccccc; color:#6c6c6c; text-transform: uppercase; }
.qs-compare-toggle.is-disabled{ opacity:.6; pointer-events:none; cursor:not-allowed;text-transform: uppercase; }

/* Make sure the label is always visible (fight theme overrides) */
.qs-compare-toggle{
  text-indent:0 !important; line-height:1.2 !important; white-space:nowrap !important;
  overflow:visible !important; visibility:visible !important;
}
.qs-compare-toggle::before, .qs-compare-toggle::after{ content:none !important }

/* Telefony – całkowicie ukryj belkę */
@media (max-width: 768px){
  .qs-compare-bar{
    display: none !important;
  }
}

@media (max-width: 992px){
  .qs-compare-bar{
    width: 90%;
    min-width: unset;
  }
}

/* checkbox style */
.qs-compare-optin-input {
  /* Ukrywa domyślny checkbox */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid black;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Styl ptaszka po zaznaczeniu */
.qs-compare-optin-input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 4px;
  height: 8px;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  transform: rotate(45deg);
}

/* Dla lepszej dostępności: efekt po najechaniu i focus */
.qs-compare-optin-input:hover,
.qs-compare-optin-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}