/* Tohar Brands - cookie consent.
   Replaces the Complianz banner with a self contained one. The look is taken
   straight off the old banner-2-optin build: 526px card at the bottom left,
   white on a 12px radius, black accept button, full width on a phone. */

.tb-ck-wrap{
  --tb-ck-w:526px;
  --tb-ck-bg:#fff;
  --tb-ck-line:#f2f2f2;
  --tb-ck-text:#222;
  --tb-ck-link:#000;
  --tb-ck-soft:#f9f9f9;
  --tb-ck-gap:10px;
}
.tb-ck{
  box-sizing:border-box;
  position:fixed;
  left:10px;
  bottom:10px;
  z-index:99999;
  max-height:calc(100vh - 20px);
  padding:15px 20px;
  display:grid;
  grid-gap:var(--tb-ck-gap);
  background:var(--tb-ck-bg);
  border-radius:12px;
  color:var(--tb-ck-text);
  direction:rtl;
  text-align:right;
  box-shadow:rgba(0,0,0,.19) 0 10px 20px,rgba(0,0,0,.23) 0 6px 6px;
}
.tb-ck *{box-sizing:border-box}
.tb-ck[hidden],.tb-ck-tab[hidden]{display:none}
@media(min-width:768px){
  .tb-ck{min-width:var(--tb-ck-w);max-width:100%}
  .tb-ck__msg,.tb-ck__cats{width:calc(var(--tb-ck-w) - 42px)}
}
@media(max-width:768px){
  .tb-ck{left:0;right:0;bottom:0;width:100%}
}

/* On a phone this card was 355px tall - 57% of the screen - because the three
   buttons were stacked one above another. Sitting at the bottom on z-index
   99999, it covered five of the eight categories in the open menu and the
   add-to-cart row on a product page, and swallowed every tap that landed on
   them. Nothing looked broken; things simply did not respond.

   Side by side the three fit a 390px screen with room to spare, and the card
   comes down to about half the height. Each button still stands 44px tall, so
   it is no harder to hit than before. */
@media(max-width:768px){
  .tb-ck{padding:12px 14px}
  .tb-ck__buttons{flex-direction:row;flex-wrap:nowrap}
  .tb-ck__btn{height:44px;padding:8px 4px;font-size:13px;flex:1 1 0;min-width:0}
  .tb-ck__title{font-size:14px}
  .tb-ck__msg{margin-bottom:0}
}
@media(max-width:360px){
  .tb-ck__btn{font-size:12px}
}

/* And while a drawer is open it steps out of the way altogether. The menu is
   something he asked for; the notice is not, and it can wait the few seconds
   until the menu is closed again. It is not dismissed - only hidden - so the
   choice is still his to make. */
body.floating-sidebar-active .tb-ck,
body.floating-sidebar-active .tb-ck-tab{
  display:none !important;
}

/* The other half of the same problem. The WhatsApp bubble and the
   accessibility key float in the bottom corners - where this card's buttons
   are. On a phone the bubble covered "מאשר/ת הכל" and the key covered
   "התאמה אישית", so the two answers that dismiss the card could not be
   pressed at all, and the card stayed up over the shop indefinitely.

   While the question is on screen they stand down. They return the moment it
   is answered - and it is one tap. */
html.tb-ck-asking .qlwapp,
html.tb-ck-asking .qlwapp__container,
html.tb-ck-asking .tb-a11y__key{
  display:none !important;
}

.tb-ck__title{
  font-size:15px;
  font-weight:500;
  line-height:1.4;
  text-align:center;
  color:var(--tb-ck-text);
  margin:0;
}
.tb-ck__msg{
  font-size:12px;
  line-height:18px;
  color:var(--tb-ck-text);
  word-wrap:break-word;
  margin:0 0 5px;
}
.tb-ck__msg p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
.tb-ck__msg a{color:var(--tb-ck-link)}

/* categories - hidden until "התאמה אישית" is pressed */
.tb-ck__cats{display:none;overflow-y:auto;max-height:40vh}
.tb-ck__cats.is-open{display:block;animation:tb-ck-fade .5s}
@keyframes tb-ck-fade{from{opacity:0}to{opacity:1}}
.tb-ck__cat{background-color:rgba(239,239,239,.5);border-radius:4px}
.tb-ck__cat+.tb-ck__cat{margin-top:10px}
.tb-ck__cat summary{display:block;list-style:none;cursor:pointer;padding:10px}
.tb-ck__cat summary::-webkit-details-marker,
.tb-ck__cat summary::marker{display:none;content:""}
.tb-ck__head{display:grid;grid-template-columns:1fr auto 15px;align-items:center;grid-gap:10px}
@media(max-width:425px){.tb-ck__head{grid-template-columns:1fr auto 15px}}
.tb-ck__cat-title{font-size:14px;font-weight:500;color:var(--tb-ck-text);justify-self:start}
.tb-ck__always{font-size:12px;font-weight:500;color:green}
.tb-ck__chev{width:18px;height:18px;transition:transform .5s ease;justify-self:end}
.tb-ck__cat[open] .tb-ck__chev{transform:rotate(180deg)}
.tb-ck__desc{font-size:12px;line-height:1.5;color:var(--tb-ck-text);padding:0 10px 10px}

/* the toggle, drawn exactly like the old one */
.tb-ck__switch{position:relative;display:inline-block;width:28px;height:15px;flex:0 0 auto}
.tb-ck__switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.tb-ck__switch span{position:absolute;inset:0;border-radius:10px;background:#F56E28;transition:background-color .3s}
.tb-ck__switch span:after{content:"";position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:10px;background:#fff;transition:right .3s}
.tb-ck__switch input:checked+span{background:#000}
.tb-ck__switch input:checked+span:after{right:15px}
.tb-ck__switch input:focus+span{box-shadow:0 0 0 2px #245fcc}
.tb-ck__switch input:disabled{cursor:default}

.tb-ck__buttons{display:flex;gap:var(--tb-ck-gap)}
.tb-ck__btn{
  height:45px;
  width:100%;
  padding:10px;
  margin:0;
  flex:initial;
  white-space:nowrap;
  border-radius:6px;
  font-size:15px;
  font-weight:500;
  line-height:20px;
  font-family:inherit;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.tb-ck__btn:hover{text-decoration:none;opacity:.9}
.tb-ck__btn--accept,.tb-ck__btn--accept:hover,.tb-ck__btn--accept:focus,.tb-ck__btn--accept:active{background-color:#000;border:1px solid #000;color:#fff}
.tb-ck__btn--deny,.tb-ck__btn--deny:hover,.tb-ck__btn--deny:focus,.tb-ck__btn--deny:active{background-color:var(--tb-ck-soft);border:1px solid var(--tb-ck-line);color:#222}
.tb-ck__btn--prefs,.tb-ck__btn--prefs:hover,.tb-ck__btn--prefs:focus,.tb-ck__btn--prefs:active,.tb-ck__btn--save,.tb-ck__btn--save:hover,.tb-ck__btn--save:focus,.tb-ck__btn--save:active{background-color:var(--tb-ck-soft);border:1px solid var(--tb-ck-line);color:#333}

.tb-ck__links{display:flex;gap:var(--tb-ck-gap);justify-content:center}
.tb-ck__links a{font-size:12px;color:var(--tb-ck-link);text-decoration:underline;margin:0}

/* the small tab that brings the banner back, desktop only */
.tb-ck-tab{
  position:fixed;
  bottom:-35px;
  left:40px;
  z-index:9998;
  min-width:100px;
  height:50px;
  padding:15px;
  border:0;
  border-radius:12px 12px 0 0;
  background:var(--tb-ck-bg);
  color:var(--tb-ck-text);
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  line-height:initial;
  cursor:pointer;
  box-shadow:rgba(0,0,0,.19) 0 10px 20px,rgba(0,0,0,.23) 0 6px 6px;
  transition:bottom .5s;
}
.tb-ck-tab:hover,.tb-ck-tab:focus{bottom:0;outline:none}
@media(max-width:768px){.tb-ck-tab{display:none}}