/* Order flow – shared styles  ( /css/order-flow.css ) */

:root{
  --of-ink:#1a1a1a; --of-muted:#6b7280; --of-line:#e5e7eb;
  --of-bg:#fff; --of-accent:#0d542b; --of-accent-2:#eab308;
}

/* ── Floating buttons ─────────────────────────────────────── */
.of-fab-wrap{
  position:fixed; right:16px; bottom:16px; z-index:1000;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.of-branch-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; color:var(--of-ink); border:1px solid var(--of-line);
  border-radius:999px; padding:8px 14px; font-size:.85rem; font-weight:600;
  box-shadow:0 6px 20px rgba(0,0,0,.08); cursor:pointer; max-width:240px;
}
.of-branch-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-cart-fab{
  position:relative; width:56px; height:56px; border-radius:50%;
  background:var(--of-accent); color:#fff; border:0; cursor:pointer;
  box-shadow:0 10px 24px rgba(13,84,43,.35);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s;
}
.of-cart-fab:hover{transform:translateY(-2px)}
.of-cart-fab.is-empty{background:#9ca3af;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.of-cart-fab__count{
  position:absolute; top:-4px; right:-4px;
  background:#fff; color:var(--of-accent); border-radius:999px;
  min-width:22px; height:22px; padding:0 6px; font-size:.75rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--of-accent);
}
body.theme-lehmuhn .of-cart-fab,
body.theme-lehmuhn .of-cart-fab__count{ color:#1a1a1a; border-color:var(--of-accent-2) }
body.theme-lehmuhn .of-cart-fab{ background:var(--of-accent-2) }
body.theme-lehmuhn .of-cart-fab__count{ background:#fff; color:#92400e }

/* ── Overlay + modal ──────────────────────────────────────── */
.of-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.55);
  z-index:1100; display:flex; align-items:center; justify-content:center;
  padding:16px; animation:ofFade .15s ease-out;
}
@keyframes ofFade{ from{opacity:0} to{opacity:1} }
.of-modal{
  background:#fff; border-radius:18px; max-width:480px; width:100%;
  max-height:92vh; overflow:auto; position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.of-modal__close{
  position:absolute; top:10px; right:10px; z-index:2;
  background:rgba(0,0,0,.5); color:#fff; border:0; border-radius:999px;
  width:32px; height:32px; font-size:20px; cursor:pointer; line-height:1;
}
.of-modal__head{ padding:20px 22px 8px }
.of-modal__head h3{ margin:0 0 4px; font-size:1.25rem }
.of-modal__head p{ margin:0; color:var(--of-muted); font-size:.9rem }

/* Branch picker */
.of-branch-list{ padding:12px 16px 18px; display:flex; flex-direction:column; gap:8px }
.of-branch{
  text-align:left; background:#f9fafb; border:1px solid var(--of-line);
  border-radius:12px; padding:12px 14px; cursor:pointer; transition:all .15s;
  display:flex; flex-direction:column; gap:2px;
}
.of-branch:hover{ background:#fff; border-color:var(--of-accent); transform:translateY(-1px) }
.of-branch strong{ font-size:.95rem; color:var(--of-ink) }
.of-branch span{ font-size:.82rem; color:var(--of-muted) }
.of-branch small{ font-size:.75rem; color:var(--of-muted) }

/* Order modal */
.of-order__img{
  width:100%; height:200px; background:#f3f4f6 center/cover no-repeat;
  border-top-left-radius:18px; border-top-right-radius:18px;
}
.of-order__body{ padding:18px 22px 22px }
.of-order__body h3{ margin:0 0 4px; font-size:1.3rem }
.of-order__desc{ color:var(--of-muted); font-size:.88rem; margin:0 0 14px }

.of-field{ margin-bottom:14px }
.of-field label{
  display:block; font-size:.8rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--of-muted); margin-bottom:6px;
}
.of-field--row{ display:flex; align-items:center; justify-content:space-between }
.of-field--row label{ margin:0 }

.of-chips{ display:flex; flex-wrap:wrap; gap:8px }
.of-chip{
  background:#f3f4f6; border:2px solid transparent; border-radius:10px;
  padding:8px 14px; font-size:.9rem; font-weight:600; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; line-height:1.2;
  color:var(--of-ink);
}
.of-chip small{ font-size:.72rem; color:var(--of-muted); font-weight:500; margin-top:2px }
.of-chip.is-active{ background:#fff; border-color:var(--of-accent); color:var(--of-accent) }
.of-chip.is-active small{ color:var(--of-accent) }
body.theme-lehmuhn .of-chip.is-active{ border-color:#92400e; color:#92400e }
body.theme-lehmuhn .of-chip.is-active small{ color:#92400e }

.of-qty{ display:inline-flex; align-items:center; gap:6px;
  background:#f3f4f6; border-radius:10px; padding:4px }
.of-qty button{
  width:30px; height:30px; border-radius:8px; border:0; background:#fff;
  font-size:1.1rem; cursor:pointer; font-weight:600;
}
.of-qty span{ min-width:28px; text-align:center; font-weight:700 }

.of-add-btn{
  margin-top:8px; width:100%; padding:14px; border:0; border-radius:12px;
  background:var(--of-accent); color:#fff; font-size:1rem; font-weight:700;
  cursor:pointer; transition:background .15s;
}
.of-add-btn:hover{ background:#0a3f20 }
body.theme-lehmuhn .of-add-btn{ background:#92400e }
body.theme-lehmuhn .of-add-btn:hover{ background:#78350f }

/* Toast */
.of-toast{
  position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(20px);
  background:#1a1a1a; color:#fff; padding:10px 18px; border-radius:999px;
  font-size:.88rem; opacity:0; pointer-events:none; transition:all .25s; z-index:1200;
}
.of-toast.is-show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* Mobile */
@media (max-width:520px){
  .of-fab-wrap{ right:12px; bottom:12px }
  .of-branch-pill{ max-width:180px; font-size:.78rem }
  .of-order__img{ height:160px }
}
/* ── Branch picker modal — 2-col grid layout ─────────── */

.of-modal--branch {
  max-width: 520px;
}

.of-modal__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 28px 20px;
  border-bottom: 1px solid #f0f0f0;
}
.of-modal__head-logo {
  width: 48px; height: 48px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: #0d542b;
  display: flex; align-items: center; justify-content: center;
}
.of-modal__head-logo img { width: 100%; height: 100%; object-fit: cover; }
.of-modal__head-logo-fb {
  display: none;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px; font-weight: 700;
  color: #eab308;
}
.of-modal__head h3 {
  font-family:sans-serif;
  font-size: 18px; font-weight: 600;
  color: #111; letter-spacing: -.4px;
  margin-bottom: 2px;
}
.of-modal__head p {
  font-size: 12px; font-weight: 300;
  color: #888;
}

/* ── 2-column grid ── */
.of-branch-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px;
  max-height: 420px;
  overflow-y: auto;
}

/* ── Branch card — vertical layout ── */
.of-branch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  padding: 0;
  background: #f9fafb;
  border: 1.5px solid #efefef;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: border-color .18s ease,
              box-shadow .22s ease,
              transform .22s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.of-branch:hover {
  border-color: #0d542b;
  box-shadow: 0 8px 24px rgba(13,84,43,.12);
  transform: translateY(-3px);
  background: #fff;
}

/* Green top stripe accent */
.of-branch::before {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: #efefef;
  transition: background .18s;
  flex-shrink: 0;
}
.of-branch:hover::before { background: #0d542b; }

/* Logo area — centered at the top of each card */
.of-branch__logo {
  width: 52px; height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: #0d542b;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(13,84,43,.2);
  margin: 18px auto 12px;
  flex-shrink: 0;
}
.of-branch__logo img { width: 100%; height: 100%; object-fit: cover; }
.of-branch__logo-fb {
  display: none;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px; font-weight: 700;
  color: #eab308;
}

/* Info — centered text in the card */
.of-branch__info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 14px 16px;
  text-align: center;
}
.of-branch__info strong {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  letter-spacing: -.2px;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.3;
}
.of-branch__info span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 300;
  color: #999;
  line-height: 1.4;
}
.of-branch__info small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  color: black;
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 9999px;
  margin-top: 2px;
}

/* Hide the arrow — not needed in card layout */
.of-branch__arrow { display: none; }

/* Empty state */
.of-branch-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 16px;
  font-size: 13px;
  color: #aaa;
  font-weight: 300;
}

/* Modal footer */
.of-modal__footer {
  padding: 12px 20px 20px;
  border-top: 1px solid #f0f0f0;
}
.of-modal__cancel {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1.5px solid #e8e8e8;
  border-radius: 9999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #888;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.of-modal__cancel:hover { border-color: #aaa; color: #444; }

/* Mobile — single column on small screens */
@media (max-width: 400px) {
  .of-branch-list { grid-template-columns: 1fr; }
}