/*
  Quick order UI – modern card style (scoped) 
  Keep it compatible with theme CSS that might set inputs to width:100%.
*/

:root{
  --talafh-red:#c0162b;          /* Talamini-ish red */
  --talafh-red-dark:#9f1022;
  --talafh-border:#e8e8ea;
  --talafh-muted:#6b7280;
  --talafh-bg:#ffffff;
  --talafh-shadow:0 10px 22px rgba(0,0,0,.06);
  --talafh-radius:16px;
}

.talafh-quick{max-width:1100px;margin:0 auto;padding:10px 0}
.talafh-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
.talafh-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}

.talafh-card{
  background:var(--talafh-bg);
  border:1px solid var(--talafh-border);
  border-radius:var(--talafh-radius);
  padding:18px;
  box-shadow:var(--talafh-shadow);
}

.talafh-card h3{
  margin:0 0 14px;
  font-size:20px;
  font-weight:700;
  letter-spacing:-.01em;
}

.talafh-sub{margin:-10px 0 12px;color:var(--talafh-muted);font-size:13px}

.talafh-card label{display:block;margin:12px 0 0;font-size:13px;font-weight:600}
.talafh-card label > span{font-weight:600}

/* Inputs */
.talafh-card select,
.talafh-card input[type="text"],
.talafh-card input[type="number"]{
  width:100%;
  margin-top:8px;
  height:42px;
  border:1px solid var(--talafh-border);
  border-radius:12px;
  background:#fff;
  padding:0 12px;
  font-size:14px;
}

.talafh-card select:focus,
.talafh-card input[type="text"]:focus,
.talafh-card input[type="number"]:focus{
  outline:none;
  border-color:rgba(192,22,43,.55);
  box-shadow:0 0 0 4px rgba(192,22,43,.12);
}

/* Button */
.talafh-add{
  margin-top:14px;
  width:100%;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
  background:var(--talafh-red);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.talafh-add:hover{background:var(--talafh-red-dark)}
.talafh-add:active{transform:translateY(1px)}

.talafh-msg{margin-top:10px;font-size:13px;min-height:18px;color:var(--talafh-muted)}

.talafh-cartlink{margin-top:18px;text-align:right}
.talafh-cartlink a{color:var(--talafh-red);font-weight:700;text-decoration:none}
.talafh-cartlink a:hover{color:var(--talafh-red-dark);text-decoration:underline}

@media (max-width: 980px){
  .talafh-grid{gap:16px}
  .talafh-row{grid-template-columns:1fr;gap:16px}
}

/* Toppings */
.talafh-toppings{
  margin:14px 0 0;
  padding:12px;
  border:1px solid var(--talafh-border);
  border-radius:14px;
  background:#fafafa;
}
.talafh-top-title{font-weight:800;margin:0 0 10px;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--talafh-muted)}
.talafh-top-hint{display:none}

.talafh-top-list{display:grid;grid-template-columns:1fr;gap:8px}

.talafh-top-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  margin:0;
  line-height:1.2;
  cursor:pointer;
  user-select:none;
}

/* Theme CSS sometimes forces inputs 100% width; override for checkbox */
.talafh-top-item input[type=checkbox]{
  width:18px !important;
  height:18px;
  margin:0 !important;
  flex:0 0 18px;
}

/* Make each topping feel like a pill */
.talafh-top-item > span{
  display:block;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
}

.talafh-top-item:hover > span{border-color:rgba(192,22,43,.25)}

.talafh-toppings:empty{display:none}

.talafh-price{
  margin:12px 0 8px;
  font-size:22px;
  font-weight:800;
  color:var(--talafh-text);
}

/* Topbar (branch + cart button) */
.talafh-topbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid var(--talafh-border);
  border-radius:var(--talafh-radius);
  background:rgba(255,255,255,.9);
  box-shadow:var(--talafh-shadow);
}
.talafh-branchlabel{margin:0;font-size:13px;font-weight:700;color:var(--talafh-muted)}
.talafh-branch{max-width:340px}

.talafh-cartbtn{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:0;
  cursor:pointer;
  border-radius:12px;
  background:var(--talafh-red);
  color:#fff;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.talafh-cartbtn:hover{background:var(--talafh-red-dark);color:#fff}
.talafh-cartcount{
  display:inline-flex;
  min-width:24px;
  height:24px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.2);
  font-size:13px;
}
.talafh-carttotal{font-weight:700;opacity:.95}

/* Sidecart */
.talafh-sidecart{margin-top:18px}
.talafh-sidecart__inner{
  border:1px solid var(--talafh-border);
  border-radius:var(--talafh-radius);
  background:#fff;
  box-shadow:var(--talafh-shadow);
  padding:14px 16px;
}
.talafh-sidecart__title{font-weight:900;margin:0 0 10px;font-size:14px;letter-spacing:.02em;text-transform:uppercase;color:var(--talafh-muted)}
.talafh-sidecart__empty{color:var(--talafh-muted);font-size:14px;padding:8px 0}
.talafh-sidecart__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.talafh-sidecart__item{display:flex;align-items:flex-start;justify-content:flex-start;gap:12px;border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:10px 12px;background:#fff}
.talafh-sidecart__itemname{font-weight:800;font-size:14px}
.talafh-sidecart__itemdetail{margin-top:4px;color:var(--talafh-muted);font-size:13px;line-height:1.25}
.talafh-sidecart__itemright{display:flex;align-items:center;gap:10px}
.talafh-sidecart__itemprice{font-weight:800}
.talafh-sidecart__remove{border:0;background:transparent;font-size:22px;line-height:1;color:var(--talafh-muted);cursor:pointer;padding:0 4px}
.talafh-sidecart__remove:hover{color:var(--talafh-red)}

.talafh-sidecart__footer{margin-top:12px}
.talafh-sidecart__totalrow{display:flex;justify-content:flex-start;align-items:center;margin-bottom:10px;font-size:14px}
.talafh-sidecart__checkout,
.talafh-sidecart__viewcart{
  display:block;
  text-align:center;
  padding:12px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
}
.talafh-sidecart__checkout{background:var(--talafh-red);color:#fff;margin-bottom:8px}
.talafh-sidecart__checkout:hover{background:var(--talafh-red-dark);color:#fff}
.talafh-sidecart__viewcart{background:#f3f4f6;color:#111;border:1px solid rgba(0,0,0,.06)}
.talafh-sidecart__viewcart:hover{border-color:rgba(192,22,43,.25)}

@media (min-width: 981px){
  /* Houd het bij 3 productkolommen. De winkelmand is een overlay (drawer). */
  .talafh-quick{max-width:1100px}
  .talafh-grid{grid-template-columns:1fr;}
  .talafh-row{grid-template-columns:repeat(3,1fr)}
}


/* Drawer / overlay sidecart */
body.talafh-noscroll{overflow:hidden}

.talafh-drawer{
  /* Force fixed overlay; some themes mess with dialog/aside positioning. */
  position:fixed !important;
  top:var(--talafh-adminbar,0px);
  left:0;
  right:0;
  bottom:0;
  z-index:99998; /* above theme header, below WP adminbar */
  pointer-events:none;
}
.talafh-drawer.is-open{pointer-events:auto}

.talafh-drawer__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  transition:opacity .2s ease;
}
.talafh-drawer.is-open .talafh-drawer__backdrop{opacity:1}

.talafh-drawer__panel{
  position:absolute;
  top:0;
  right:0;
  width:380px;
  max-width:92vw;
  height:100%;
  background:#fff;
  transform:translateX(100%);
  transition:transform .25s ease;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
}

.talafh-drawer.is-open .talafh-drawer__panel{transform:translateX(0)}

.talafh-drawer__header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:14px 16px;
  border-bottom:1px solid var(--talafh-border);
}

.talafh-drawer__close{
  background:transparent;
  border:0;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  color:#111;
  padding:0;
  margin:0;
}

.talafh-drawer__panel .talafh-sidecart__inner{
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.talafh-drawer__panel .talafh-sidecart__content{
  overflow:auto;
  padding-right:2px;
}

.talafh-drawer__panel .talafh-sidecart__footer{margin-top:auto}

@media (max-width: 900px){
  .talafh-drawer__panel{
    left:0;
    right:0;
    top:auto;
    bottom:0;
    width:100%;
    max-width:none;
    height:min(75vh,560px);
    border-radius:18px 18px 0 0;
    transform:translateY(100%);
  }
  .talafh-drawer.is-open .talafh-drawer__panel{transform:translateY(0)}
}

.talafh-branchmsg{margin-top:6px;font-size:13px;color:#b00020;}