/* ============================================================
   Shawarma Prince Companion — "Order Now" Label
   Loaded only when the label is turned on in the dashboard.
   All colors/typography come from CSS variables set in
   includes/elementor.php (spc_output_css_variables), so
   changing a setting in the dashboard updates this everywhere.
   Position (top/left/right/bottom) is set by
   assets/js/order-now.js, which measures the delivery button
   stack so the label always sits directly above it.
   ============================================================ */

.spc-order-now-label {
  position: fixed;
  z-index: 9999998; /* just under .spc-delivery-float (9999999) */
  pointer-events: none; /* never blocks clicks on the buttons below it */
  white-space: nowrap;

  font-family: 'Inter', sans-serif;
  font-size: var(--spc-on-fs, 13px);
  font-weight: var(--spc-on-weight, 800);
  letter-spacing: var(--spc-on-ls, 1.5px);
  text-transform: var(--spc-on-tt, uppercase);
  color: var(--spc-on-color, #FDB71B);
  background: var(--spc-on-bg, rgba(26,15,7,0.85));

  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(253,183,27,0.35);

  /* Hidden until JS has measured and placed it correctly —
     avoids a flash in the top-left corner before positioning. */
  opacity: 0;
  transition: opacity 0.25s ease;
}

.spc-order-now-label.spc-on-ready { opacity: 1; }

/* Smaller type on tablet/mobile, matching the delivery buttons'
   own 1024px breakpoint */
@media (max-width: 1023px) {
  .spc-order-now-label { font-size: var(--spc-on-fs-m, 11px); }
}

/* Always visible (no positioning JS runs) inside the Elementor editor */
body.elementor-editor-active .spc-order-now-label {
  opacity: 1;
  position: absolute;
  top: 10px;
  right: 10px;
}