/*!
 * Oyolloo Elements — bulk order.
 *
 * Three pieces: the button in the corner of a dish card, the bar that floats
 * at the foot of the page once something is in it, and the dialog that bar
 * opens. Every rule is scoped to .oo-bulk, .oo-bulk-add or .oo-bulk-modal —
 * there is no element selector and no :root block, so nothing here can reach
 * the theme or another widget.
 *
 * The colours are not this file's own. The ground is the footer's (#0E0E0E),
 * the accent is the brand yellow every other widget uses, and the order
 * button is the same green, radius and weight as the one on a dish card — the
 * tray is the cards' companion, so it is cut from the same cloth.
 */

.oo-bulk,
.oo-bulk-add,
.oo-bulk-modal{
  --oobk-accent:#F7BE27;
  --oobk-accent-dk:#E0A812;
  --oobk-on-accent:#211A05;

  /* lifted from .oo-prods-sec .oo-prod__add--wa so the two buttons are the
     same button in two places */
  --oobk-wa:#25D366;
  --oobk-wa-dk:#1EBE5A;
  --oobk-on-wa:#FFFFFF;
  --oobk-wa-sh:0 6px 18px -9px rgba(37,211,102,.85);

  /* the footer's ground, so the bar reads as part of the site furniture */
  --oobk-dark:#0E0E0E;
  --oobk-line:#2A2620;
  --oobk-on-dark:#F4F1E9;
  --oobk-on-dark-mut:#A9A296;

  --oobk-r:14px;
  --oobk-r-sm:6px;

  --oobk-f-head:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --oobk-f-body:'Roboto','Roboto Fallback','Segoe UI',Helvetica,Arial,sans-serif;

  --oobk-ease:cubic-bezier(.22,.61,.36,1);
  --oobk-sh:0 8px 20px rgba(0,0,0,.24), 0 30px 60px -28px rgba(0,0,0,.7);
}

.oo-bulk,.oo-bulk *,.oo-bulk *::before,.oo-bulk *::after,
.oo-bulk-modal,.oo-bulk-modal *,.oo-bulk-modal *::before,.oo-bulk-modal *::after,
.oo-bulk-add,.oo-bulk-add *{ box-sizing:border-box; }

/* ================= the button on a card =================
   Sits in the one corner of the card art that the dish code and the promo tag
   leave free. The card is position:relative and overflow:hidden, so the
   button is placed inside its bounds rather than hanging off them. */
.oo-bulk-add{
  position:absolute; top:10px; right:10px; z-index:4;
  width:34px; height:34px; padding:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(244,241,233,.3); border-radius:50%;
  background:rgba(10,9,8,.72); color:var(--oobk-on-dark);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  cursor:pointer; font-family:var(--oobk-f-head); line-height:0;
  transition:background-color .2s var(--oobk-ease), border-color .2s var(--oobk-ease),
             color .2s var(--oobk-ease), transform .2s var(--oobk-ease);
}
.oo-bulk-add:hover{ border-color:var(--oobk-accent); color:var(--oobk-accent); transform:scale(1.06); }
.oo-bulk-add:active{ transform:scale(.94); }

.oo-bulk-add[aria-pressed="true"]{
  background:var(--oobk-accent); border-color:var(--oobk-accent); color:var(--oobk-on-accent);
}
.oo-bulk-add[aria-pressed="true"]:hover{ background:var(--oobk-accent-dk); color:var(--oobk-on-accent); }

/* one glyph fades out as the other fades in, rather than the button swapping
   icons: nothing to load on the first tap and nothing to reflow */
.oo-bulk-add__ico path{ transition:opacity .18s var(--oobk-ease); }
.oo-bulk-add__tick{ opacity:0; }
.oo-bulk-add[aria-pressed="true"] .oo-bulk-add__plus{ opacity:0; }
.oo-bulk-add[aria-pressed="true"] .oo-bulk-add__tick{ opacity:1; }

/* the count only appears from the second helping, so one of a dish keeps the
   plain tick it was given */
.oo-bulk-add__n{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px;
  display:none; align-items:center; justify-content:center;
  padding:0 4px; border-radius:9px;
  background:var(--oobk-dark); color:var(--oobk-on-dark);
  font-family:var(--oobk-f-head); font-weight:600; font-size:.6rem;
  letter-spacing:.02em; line-height:1;
}
.oo-bulk-add.oo-has-n .oo-bulk-add__n{ display:inline-flex; }

/* ---- the same control, standing in a row rather than over a photograph ----
   The menu list gives each dish a strip of controls on a pale ground, so this
   one drops the scrim it wears on a card and takes the same square outline as
   the order button it sits next to. */
.oo-bulk-add--inline{
  position:static; flex:none;
  width:32px; height:32px; border-radius:var(--oobk-r-sm);
  border:1px solid #D9D9D9; background:none; color:#642F21;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.oo-bulk-add--inline:hover{
  border-color:var(--oobk-accent); color:var(--oobk-accent-dk);
  background:none; transform:none;
}
.oo-bulk-add--inline[aria-pressed="true"],
.oo-bulk-add--inline[aria-pressed="true"]:hover{
  background:var(--oobk-accent); border-color:var(--oobk-accent); color:var(--oobk-on-accent);
}
.oo-bulk-add--inline .oo-bulk-add__n{
  top:-6px; right:-6px;
  background:var(--oobk-dark); color:var(--oobk-on-dark);
}

/* ================= the bar ================= */
.oo-bulk{
  position:fixed; right:18px; bottom:18px; z-index:82;
  width:min(376px,calc(100vw - 36px));
  font-family:var(--oobk-f-body);
  /* stated, not inherited: a <button> does not take its colour from the page,
     so without this the count inside one falls back to the browser's black
     and disappears into the bar */
  color:var(--oobk-on-dark);
  animation:oo-bulk-in .32s var(--oobk-ease) both;
}
.oo-bulk[hidden]{ display:none; }

/* it arrives from below rather than simply appearing, so the first dish reads
   as something that happened rather than something always there */
@keyframes oo-bulk-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.oo-bulk__bar{
  display:flex; align-items:center; gap:9px;
  padding:7px 7px 7px 9px;
  background:var(--oobk-dark); border:1px solid var(--oobk-line);
  border-radius:12px; box-shadow:var(--oobk-sh);
  /* the whole bar opens the order, not just the part of it that is a button */
  cursor:pointer;
}

/* ---- the keyboard's way in ----
   Clicking anywhere on the bar opens the order; this button is what makes the
   same thing reachable by tab and enter. It fills the bar's left side, so the
   pointer and the keyboard are aiming at the same place. */
.oo-bulk__open{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:10px;
  margin:0; padding:3px 2px; border:0; border-radius:9px;
  background:none; cursor:pointer; text-align:left;
  color:inherit;
}
.oo-bulk__bar:hover .oo-bulk__open{ opacity:.92; }

/* ---- the stack of faces ---- */
.oo-bulk__faces{ display:flex; align-items:center; flex:none; line-height:0; }
/* The tray is printed by a widget, so it lives inside .elementor — and
   Elementor's frontend sheet carries `.elementor img{border:none;
   border-radius:0}`, which at (0,1,1) beats a lone class. Naming the tray as
   well takes these images back. Without it the discs render as bare squares,
   which is exactly how they looked before this line existed. */
.oo-bulk .oo-bulk__face{
  width:26px; height:26px; flex:none; display:block;
  border-radius:50%; object-fit:cover;
  /* a ring of the brand yellow rather than of the bar's own ground: at this
     size the photographs are too dark and too alike to tell one disc from the
     next without an edge that carries its own colour */
  border:2px solid var(--oobk-accent);
  background:var(--oobk-line);
}
.oo-bulk .oo-bulk__face + .oo-bulk__face{ margin-left:-10px; }
.oo-bulk .oo-bulk__face--more{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--oobk-accent); color:var(--oobk-on-accent);
  font-family:var(--oobk-f-head); font-weight:600; font-size:.64rem; letter-spacing:.02em;
}

/* ---- the line of text ---- */
.oo-bulk__txt{ flex:1 1 auto; min-width:66px; display:flex; flex-direction:column; gap:1px; }
/* named through the bar so it outranks the <strong> reset at the foot of this
   file, which is a class-plus-element selector and would otherwise win */
.oo-bulk .oo-bulk__count{
  font-family:var(--oobk-f-head); font-weight:600; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--oobk-on-dark);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.oo-bulk__bar .oo-bulk__sum{
  font-family:var(--oobk-f-head); font-weight:400; font-size:.68rem;
  letter-spacing:.06em; color:var(--oobk-on-dark-mut);
}

/* ---- the button that sends it ----
   Same green, same radius, same weight and same shadow as the order button on
   a dish card. */
.oo-bulk__go{
  flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin:0; padding:10px 20px; border:2px solid transparent; border-radius:var(--oobk-r-sm);
  background:var(--oobk-wa); color:var(--oobk-on-wa); text-decoration:none;
  font-family:var(--oobk-f-head); font-weight:600; font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  box-shadow:var(--oobk-wa-sh);
  transition:background-color .2s ease, color .2s ease, transform .12s ease;
}
.oo-bulk__go:hover{ background:var(--oobk-wa-dk); color:var(--oobk-on-wa); transform:translateY(-1px); }
.oo-bulk__go:active{ transform:translateY(1px); }
.oo-bulk__bar .oo-bulk__go{ padding:9px 15px; font-size:.72rem; gap:7px; }
.oo-bulk__go--wide{ width:100%; }
.oo-bulk__wa{ flex:none; display:block; }

/* ================= the dialog ================= */
.oo-bulk-modal{
  /* a dialog carries a browser default border, padding and width cap; all
     three go before anything of ours is laid on top */
  padding:0; margin:auto;
  width:min(560px,calc(100vw - 36px)); max-width:none;
  max-height:min(82vh,760px);
  background:var(--oobk-dark); color:var(--oobk-on-dark);
  border:1px solid var(--oobk-line); border-radius:var(--oobk-r);
  box-shadow:var(--oobk-sh);
  font-family:var(--oobk-f-body);
  overflow:hidden;
}
.oo-bulk-modal[open]{ display:flex; flex-direction:column; }
.oo-bulk-modal::backdrop{ background:rgba(4,4,4,.74); }

/* showModal() is what lifts a dialog into the top layer and dims the page
   behind it. Where it is missing the dialog still opens, and this puts it
   over the page by hand. */
.oo-bulk-modal.oo-is-plain{ position:fixed; inset:0; z-index:9999; }

.oo-bulk-modal__head{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:16px 16px 14px; border-bottom:1px solid var(--oobk-line);
}
.oo-bulk-modal .oo-bulk-modal__title{
  flex:1; margin:0;
  font-family:var(--oobk-f-head); font-weight:600; font-size:.94rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--oobk-on-dark);
}
.oo-bulk-modal__x{
  flex:none; width:34px; height:34px; padding:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--oobk-line); border-radius:50%;
  background:none; cursor:pointer; line-height:0; color:var(--oobk-on-dark-mut);
  transition:color .2s var(--oobk-ease), border-color .2s var(--oobk-ease);
}
.oo-bulk-modal__x:hover{ color:var(--oobk-accent); border-color:var(--oobk-accent); }

.oo-bulk__list{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:8px; }

.oo-bulk__row{ display:flex; align-items:center; gap:12px; padding:10px 8px; }
.oo-bulk__row + .oo-bulk__row{ border-top:1px solid var(--oobk-line); }
/* named twice for the same reason as the discs above */
.oo-bulk-modal .oo-bulk__row-img{
  width:46px; height:46px; flex:none; display:block;
  border-radius:8px; object-fit:cover; border:0;
  background:var(--oobk-line);
}
.oo-bulk__row-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.oo-bulk__row-name{
  font-family:var(--oobk-f-head); font-weight:500; font-size:.86rem;
  letter-spacing:.02em; color:var(--oobk-on-dark);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.oo-bulk__row-price{
  font-family:var(--oobk-f-head); font-weight:400; font-size:.76rem;
  letter-spacing:.05em; color:var(--oobk-on-dark-mut);
}

.oo-bulk__qty{
  flex:none; display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--oobk-line); border-radius:100px; padding:2px;
}
.oo-bulk__step{
  width:28px; height:28px; padding:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:none; cursor:pointer;
  color:var(--oobk-on-dark); font-family:var(--oobk-f-head); font-weight:600;
  font-size:1rem; line-height:1;
  transition:background-color .18s var(--oobk-ease), color .18s var(--oobk-ease);
}
.oo-bulk__step:hover{ background:var(--oobk-accent); color:var(--oobk-on-accent); }
.oo-bulk__n{
  min-width:22px; text-align:center;
  font-family:var(--oobk-f-head); font-weight:600; font-size:.84rem;
  color:var(--oobk-on-dark); font-variant-numeric:tabular-nums;
}

.oo-bulk-modal__foot{
  flex:none; display:flex; flex-direction:column; gap:10px;
  padding:14px 16px 16px; border-top:1px solid var(--oobk-line);
}
.oo-bulk-modal__tot{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-family:var(--oobk-f-head); letter-spacing:.1em; text-transform:uppercase;
  font-size:.78rem; color:var(--oobk-on-dark-mut);
}
.oo-bulk-modal__tot .oo-bulk__sum{
  font-size:1.16rem; font-weight:600; letter-spacing:.02em;
  text-transform:none; color:var(--oobk-accent); font-variant-numeric:tabular-nums;
}

.oo-bulk__clear{
  width:100%; margin:0; padding:9px; border:0; border-radius:var(--oobk-r-sm);
  display:inline-flex; align-items:center; justify-content:center;
  background:none; cursor:pointer; color:var(--oobk-on-dark-mut);
  font-family:var(--oobk-f-head); font-weight:500; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  transition:color .2s var(--oobk-ease), background-color .2s var(--oobk-ease);
}
.oo-bulk__clear:hover{ color:var(--oobk-on-dark); background:var(--oobk-line); }

.oo-bulk :focus-visible,
.oo-bulk-modal :focus-visible,
.oo-bulk-add:focus-visible{ outline:3px solid var(--oobk-accent); outline-offset:2px; }

/* ================= responsive ================= */
/* on a phone the bar spans the foot of the screen: a pill in one corner would
   sit under the thumb that is scrolling the menu */
@media (max-width:560px){
  .oo-bulk{ right:10px; left:10px; bottom:10px; width:auto; }
  .oo-bulk .oo-bulk__face + .oo-bulk__face{ margin-left:-9px; }

  /* and the dialog takes the whole screen rather than floating in the middle
     of one: at this size a centred card is a window onto a window */
  .oo-bulk-modal{
    width:100vw; max-width:100vw; max-height:none;
    height:100vh; height:100dvh;
    border:0; border-radius:0;
  }
}

/* narrower than this the discs, the count and a labelled button cannot share
   one line, so the button takes a line of its own rather than losing its
   label: a bare green square is not obviously the thing that sends the order */
@media (max-width:430px){
  .oo-bulk__bar{ flex-wrap:wrap; row-gap:9px; }
  .oo-bulk__open{ flex:1 1 100%; }
  .oo-bulk__go{ flex:1 1 100%; }
}

@media (prefers-reduced-motion:reduce){
  .oo-bulk{ animation-duration:.001ms; }
  .oo-bulk-add,.oo-bulk__go,.oo-bulk__step,.oo-bulk__open{ transition-duration:.001ms; }
  .oo-bulk-add:hover,.oo-bulk-add:active,.oo-bulk__go:hover{ transform:none; }
}

/* ================= theme hardening =================
   A WordPress theme styles bare elements — button, img, a, strong. Those
   rules beat inheritance however low their specificity, so anything a theme
   is likely to set is declared here rather than left to inherit. Found on
   this site: styles.css gives every button a margin and every image a radius,
   and colours every heading and strong brown. */
.oo-bulk button,.oo-bulk-modal button,.oo-bulk-add{ margin:0; text-transform:none; box-shadow:none; }
/* `height:auto` is the theme's and Elementor's habit, and it must not reach
   the discs — but the disc size is stated once, up in the rule that draws
   them, rather than restated here where the two copies drifted apart and left
   them 26 wide by 30 tall. .oo-bulk .oo-bulk__face already outranks
   .elementor img on its own. */
.oo-bulk img:not(.oo-bulk__face),
.oo-bulk-modal img:not(.oo-bulk__row-img){ max-width:none; box-shadow:none; height:auto; }
.oo-bulk .oo-bulk__face,
.oo-bulk-modal .oo-bulk__row-img{ max-width:none; box-shadow:none; }
.oo-bulk__go{ box-shadow:var(--oobk-wa-sh); }
.oo-bulk strong,.oo-bulk-modal strong{ color:inherit; font-family:inherit; }