/* ===== Core modal layout (Light Theme) ===== */
.fb-modal-open { overflow: hidden; }
.fb-modal { position: fixed; inset: 0; z-index: 9999; }
.fb-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }

.fb-modal__dialog {
  position: relative;
  width: min(92vw, 640px);
  margin: 6vh auto;
  background: #ffffff;              /* white modal background */
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  color: #111;                      /* black text by default */
}

/* Sections */
.fb-modal__header,
.fb-modal__body,
.fb-modal__footer { padding: 16px 18px; background: #fff; }

.fb-modal__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid #e11d2f; /* brand red underline */
}

.fb-modal__title {
  margin: 0;
  font-size: 18px;
  color: #111;                      /* black */
  letter-spacing: .2px;
  text-align: center;
}

.fb-modal__branding img,
.fb-modal__branding .fb-modal__logo {
  height: 40px;
  width: auto;
  display: block;
}

.fb-modal__close {
  border: 0;
  background: transparent;
  font-size: 22px;
  color: #888;
  cursor: not-allowed;         /* disabled until valid */
  opacity: .6;
}
.fb-modal__close.ready {
  cursor: pointer;
  color: #333;
  opacity: 1;
}
.fb-modal__close.ready:hover { color: #000; }

.fb-modal__body { background: #fff; color: #111; }

/* ===== Segmented sliding radio (Delivery / Pick-up) ===== */
.fb-segment {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 12px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  margin-bottom: 14px;
}
.fb-segment__input { position: absolute; opacity: 0; pointer-events: none; }
.fb-segment__label {
  padding: 11px 12px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  z-index: 2;
  font-weight: 700;
  color: #374151;                 /* gray text */
}
.fb-segment__thumb {
  position: absolute;
  top: 3px; bottom: 3px;
  width: calc(50% - 6px);
  left: 3px;
  border-radius: 9px;
  background: #e11d2f;            /* red highlight */
  box-shadow: 0 0 0 2px rgba(225,29,47,.25) inset;
  transition: transform .25s ease;
  z-index: 1;
}
.fb-segment--delivery .fb-segment__thumb { transform: translateX(0%); }
.fb-segment--pickup .fb-segment__thumb   { transform: translateX(100%); }
.fb-segment--delivery .fb-segment__label:first-of-type,
.fb-segment--pickup .fb-segment__label:last-of-type { color: #fff; }

/* ===== Fields & controls ===== */
.fb-field { margin-top: 8px; }
.fb-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #111;                     /* black labels */
}

.fb-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  background: #ffffff;             /* white dropdown */
  color: #111;                     /* black text */
  outline: none;
  height: auto;
}
.fb-select:focus {
  border-color: #e11d2f;
  box-shadow: 0 0 0 2px rgba(225,29,47,.25);
}

/* Fix option list colors (white background + black text) */
.fb-select option {
  background: #ffffff !important;
  color: #111 !important;
}

/* Helper / error text */
.fb-help { margin: 10px 2px 0; color: #b00012; font-size: 13px; display: none; }

/* ===== Primary button ===== */
.fb-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: #e11d2f;            /* red button */
  color: #fff;                    /* white text */
  font-weight: 700;
  letter-spacing: .2px;
  transition: filter .15s ease, transform .06s ease;
}
.fb-btn:hover { filter: brightness(1.05); }
.fb-btn:active { transform: translateY(1px); }
.fb-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ===== Floating choice chip ===== */
.fb-floating {
  position: fixed;
  left: 16px;    /* bottom-left */
  right: auto;
  bottom: 16px;
  z-index: 9998;
  transition: transform .2s ease, opacity .2s ease;
}
.fb-floating--hidden { opacity: 0; pointer-events:none; transform: translateY(8px); }
.fb-floating__pill {
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  background:#fff; color:#111; border:1px solid #e5e7eb; border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,.15);
}
.fb-floating__label { font-size: 13px; line-height: 1; }
.fb-floating__pill::before {
  content:''; width:10px; height:10px; border-radius:50%; background:#e11d2f; display:inline-block;
  margin-right: 2px;
}
.fb-floating__change {
  border:0; border-left:1px solid #e5e7eb; margin-left:6px; padding-left:10px;
  background:transparent; color:#b00012; cursor:pointer; font-weight:600; font-size:12px;
}
.fb-floating__change:hover { color:#7a0010; }

.fb_cart_count_btn {
    width: 60px;
    height: 60px;
    background-color: #000;
    position: fixed;
    border: 1px solid #fecc35;
    bottom: 100px;
    right: 60px;
    cursor: pointer;
    z-index: 999999 !important;
}

/* ===== Micro-interactions ===== */
.fb-shake { animation: fb-shake .3s ease; }
@keyframes fb-shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

/* ===== Responsive ===== */
@media (max-width: 480px) {
  .fb-modal__dialog { width: 94vw; margin: 6vh auto; border-radius: 14px; }
  .fb-modal__title { font-size: 16px; }
  .fb-modal__branding img { height: 32px; }
}


/* ===== Mobile-only: show only header + modal while popup is open ===== */

/* lock scrolling when modal opens (you already have this, keeping for clarity) */
.fb-modal-open { overflow: hidden; }

/* mark anything we temporarily hide */
.fb-hidden-during-modal { display: none !important; }

/* keep header above modal backdrop so it remains visible */
@media (max-width: 768px) {
  header {
    position: relative;
    z-index: 10000; /* higher than .fb-modal (9999) to keep header visible */
  }

  /* when the modal is open on mobile, turn it into a full-screen sheet */
  .fb-modal-open-mobile .fb-modal__dialog {
    margin: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
  }

  /* allow the modal body to scroll within viewport height */
  .fb-modal-open-mobile .fb-modal__body {
    max-height: calc(100vh - 120px); /* header + footer approx */
    overflow: auto;
  }
}