/* CSS minimized for clarity of build; same behavior as previous stable build */
/* Fixed trigger */
.cb-chat-trigger{ position:fixed !important; right:16px; bottom:16px; z-index:999999; background:var(--cb-btn-bg,#2f6f3e); color:var(--cb-btn-text,#fff); border:none; padding:12px 16px; border-radius:0; font-weight:600; box-shadow:0 6px 20px rgba(0,0,0,.15); }
/* Overlay */
#cb-chat-modal-root{ position:fixed; inset:0; z-index:999998; pointer-events:none; }
.cb-chat-overlay{ position:fixed; inset:0; background:transparent; pointer-events:none; }
body.cb-chat-open #cb-chat-modal-root .cb-chat-overlay{ pointer-events:auto; }
@media (max-width:1024px){ body.cb-chat-open #cb-chat-modal-root .cb-chat-overlay{ background:rgba(0,0,0,.45); } }
/* Modal */
.cb-chat-modal{ position:fixed; right:16px; bottom:16px; width:min(var(--cb-modal-w,420px),calc(100vw - 16px)); height:min(var(--cb-modal-h,580px),90svh); background:#fff; border-radius:0; box-shadow:0 20px 40px rgba(0,0,0,.18); display:grid; grid-template-rows:56px 1fr; overflow:hidden; pointer-events:auto; }
.cb-chat-header{ display:grid; grid-template-columns:1fr auto auto auto; gap:8px; align-items:center; padding:10px 12px; background:var(--cb-main,#2f6f3e); color:#fff; }
.cb-chat-cartbtn{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); color:#fff; padding:6px 10px; }
.cb-chat-close{ background:transparent; border:none; color:#fff; font-size:20px; }
/* Content & body */
.cb-chat-content{ height:100%; display:flex; flex-direction:column; min-height:0; }
.cb-chat-body{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:220px 1fr; overflow:hidden; }
.cb-chat-cats{ border-right:1px solid #eee; overflow-y:auto; padding:8px; background:#fafafa; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; }
.cb-chat-products{ position:relative; height:100%; overflow-y:auto; padding:12px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; }
.cb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.cb-card{ border:1px solid #eee; border-radius:0; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.cb-card img{ width:100%; height:var(--cb-card-img-h,140px); object-fit:cover; background:#f6f6f6; }
.cb-card .cb-card-body{ padding:10px; display:grid; gap:6px; }
.cb-card .cb-title{ font-weight:600; font-size:var(--cb-card-title-fs,14px); }
.cb-card .cb-short{ color:#555; font-size:12px; }
.cb-card .cb-price{ font-weight:700; color:var(--cb-main,#2f6f3e); }
.cb-price-hint{ font-size:12px; color:#6b7280; }
.cb-card .cb-qty{ display:flex; gap:6px; align-items:center; }
.cb-card .cb-qty input{ width:56px; }
.cb-card .cb-add{ background:var(--cb-main,#2f6f3e); color:#fff; border:none; padding:8px 10px; }
.cb-cart-panel{ position:absolute; right:0; top:56px; bottom:0; width:360px; background:#fff; border-left:1px solid #eee; transform:translateX(100%); transition:transform .2s ease; display:grid; grid-template-rows:1fr auto; }
.cb-cart-panel.open{ transform:translateX(0); }
.cb-cart-list{ overflow-y:auto; padding:12px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; }
.cb-cart-foot{ padding:12px; border-top:1px solid #eee; display:grid; gap:8px; }
.cb-primary{ background:var(--cb-main,#2f6f3e); color:#fff; border:none; padding:10px 12px; }
.cb-secondary{ background:#f3f4f6; color:#111; border:1px solid #e5e7eb; padding:10px 12px; }
.cb-checkout{ position:absolute; inset:56px 0 0 0; background:#fff; z-index:4; display:none; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; }
.cb-checkout.open{ display:block; }
@media (max-width:1024px){ .cb-chat-modal{ right:12px; bottom:max(12px, env(safe-area-inset-bottom,0px)); width:min(calc(100vw - 24px),720px); height:min(88svh, var(--cb-modal-h,600px)); max-height:90svh; } .cb-chat-body{ grid-template-columns:180px 1fr; } }
@media (max-width:768px){ .cb-chat-modal{ right:8px; bottom:max(8px, env(safe-area-inset-bottom,0px)); width:calc(100vw - 16px); height:min(92svh,92dvh); } .cb-chat-body{ grid-template-columns:1fr; } .cb-chat-cats{ display:none; } .cb-cart-panel{ width:100%; } }
@media (max-width:480px){ .cb-chat-modal{ right:6px; bottom:max(6px, env(safe-area-inset-bottom,0px)); width:calc(100vw - 12px); height:min(94svh,94dvh); } }

/* Checkout form field layout (restored) */
.cb-checkout form{ max-width:720px; margin:0 auto; padding:16px; display:grid; gap:10px; }
.cb-row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.cb-checkout label{ display:block; font-weight:600; font-size:13px; margin-bottom:4px; }
.cb-checkout input[type="text"],
.cb-checkout input[type="email"],
.cb-checkout input[type="number"],
.cb-checkout input[type="password"]{
  width:100%; padding:10px; border:1px solid #ddd; border-radius:0; box-sizing:border-box;
}
@media (max-width: 640px){
  .cb-row{ grid-template-columns: 1fr; }
}


/* Thank-you (success) view — centered nicely like older versions */
.cb-checkout > .cb-success{
  min-height: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
  gap: 12px;
}
.cb-checkout > .cb-success h3{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
}
.cb-checkout > .cb-success p{
  margin: 0 0 16px;
}
.cb-checkout > .cb-success .cb-primary,
.cb-checkout > .cb-success .cb-secondary{
  min-width: 160px;
}
@media (max-width: 480px){
  .cb-checkout > .cb-success .cb-primary,
  .cb-checkout > .cb-success .cb-secondary{
    width: 100%;
  }
}

/* Layout tweaks: position the "Zurück zu den Kategorien" Button sinnvoll
   und verbessern die Lesbarkeit der Menge-Eingabe, ohne Logik zu verändern. */

/* Desktop: Back-Button unten links im Produktbereich platzieren */
@media (min-width: 769px){
  .cb-chat-body{
    position: relative; /* Anker für den absolut positionierten Button */
  }

  /* Kopfzeile in der Produktansicht (enthält den Zurück-Button) ans untere linke Eck verschieben */
  .cb-chat-body .cb-chat-products > .cb-grid > div:not(.cb-grid):first-child{
    position: absolute;
    left: 16px;
    bottom: 16px;
    margin: 0;
    padding: 0;
    width: auto;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* Button selbst etwas kompakter darstellen */
  .cb-chat-body .cb-chat-products > .cb-grid > div:not(.cb-grid):first-child .cb-secondary{
    padding: 4px 10px;
    font-size: 13px;
  }
}

/* Mobile & kleine Tablets: nur eine Spalte – so gibt es keine leere linke Spalte mehr */
@media (max-width: 768px){
  .cb-chat-body{
    grid-template-columns: 1fr;
  }
}

/* Menge-Eingabe in den Produktkarten besser lesbar machen */
.cb-card .cb-qty input{
  width: 64px;
  font-size: 14px;
  text-align: center;
  padding: 6px 4px;
}

/* Auf sehr kleinen Screens etwas mehr Luft geben */
@media (max-width: 480px){
  .cb-card .cb-qty{
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* --- Mobile-Optimierungen (nur Darstellung, keine Logik) --- */
@media (max-width: 768px){

  /* Nur eine Spalte auf Smartphone/kleinen Tablets,
     damit keine leere Fläche links bleibt. */
  .cb-chat-body{
    grid-template-columns: 1fr;
  }

  /* Kategorien-Spalte bleibt ausgeblendet und bekommt keine Breite. */
  .cb-chat-cats{
    display: none;
    width: 0;
  }

  /* Header als flexible Leiste mit Umbruch darstellen,
     damit der Schließ-Button (X) nicht gequetscht wird. */
  .cb-chat-header{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px;
  }

  .cb-chat-header .cb-chat-title{
    flex: 1 1 100%;
    font-size: 16px;
  }

  .cb-chat-header .cb-chat-cartbtn{
    flex: 1 1 auto;
    padding: 6px 8px;
  }

  .cb-chat-header .cb-chat-close{
    margin-left: auto;
    flex: 0 0 auto;
  }

  /* Modal über die gesamte Breite laufen lassen,
     ohne dass rechts etwas abgeschnitten wirkt. */
  .cb-chat-modal{
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }

  /* Produktbereich auf Mobile etwas kompakter paddings geben. */
  .cb-chat-products{
    padding: 8px;
  }
}

/* --- Mobile Header/Product-Overlap Fix --- */
@media (max-width: 768px){
  /* Header darf auf Mobile dynamisch hoch sein,
     Body beginnt immer darunter. */
  .cb-chat-modal{
    grid-template-rows: auto 1fr;
  }

  /* Etwas Abstand zwischen Header und Inhalt,
     damit Karten/Produkte nicht optisch in die Buttons laufen. */
  .cb-chat-products{
    padding-top: 12px;
  }
}