/* ==============================================================
   ORDER FLY BUTTON
   "Siparişi Tamamla → Sipariş Alındı" with truck animation.
   Adapted to brand colors. Keeps the parent .bubs-checkout-btn
   dimensions intact (full width, fixed height).
   ============================================================== */

.bubs-checkout-btn.order-fly-btn {
  /* Re-establish a known height so the animation track stays consistent */
  position: relative;
  height: 50px;
  padding: 0;
  overflow: hidden;
  display: block;
  /* Hide the default ::after arrow that the base style adds */
  letter-spacing: 0.06em;
}

/* Suppress the inherited "→" pseudo-arrow */
.bubs-checkout-btn.order-fly-btn::after {
  content: none !important;
  display: none !important;
}

/* Default & success labels share the same centered layout */
.bubs-checkout-btn.order-fly-btn .ofb-default,
.bubs-checkout-btn.order-fly-btn .ofb-success {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  transition: opacity 0.3s ease;
  z-index: 5;
  pointer-events: none;
}

.bubs-checkout-btn.order-fly-btn .ofb-default { opacity: 1; transition-delay: 0.3s; }
.bubs-checkout-btn.order-fly-btn .ofb-success { opacity: 0; }

.bubs-checkout-btn.order-fly-btn .ofb-success svg {
  width: 14px;
  height: 12px;
  fill: none;
  stroke: #6FE2A0;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: stroke-dashoffset 0.3s ease;
}

/* Box (cargo) */
.bubs-checkout-btn.order-fly-btn .ofb-box {
  position: absolute;
  width: 22px;
  height: 22px;
  right: 100%;
  top: 50%;
  margin-top: -11px;
  border-radius: 3px;
  background: linear-gradient(#EDD9A9, #DCB773);
  z-index: 2;
  opacity: 0;
}
.bubs-checkout-btn.order-fly-btn .ofb-box::before,
.bubs-checkout-btn.order-fly-btn .ofb-box::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
}
.bubs-checkout-btn.order-fly-btn .ofb-box::before {
  height: 3px;
  margin-top: -1px;
  background: rgba(0, 0, 0, 0.10);
}
.bubs-checkout-btn.order-fly-btn .ofb-box::after {
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
}

/* Truck */
.bubs-checkout-btn.order-fly-btn .ofb-truck {
  position: absolute;
  width: 60px;
  height: 36px;
  left: 100%;
  top: 50%;
  margin-top: -18px;
  z-index: 3;
  transform: translateX(24px);
  opacity: 0;
}
.bubs-checkout-btn.order-fly-btn .ofb-truck::before,
.bubs-checkout-btn.order-fly-btn .ofb-truck::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 18px;
  right: 56px;
  background: var(--color-text-on-dark);
  border-radius: 1px;
  transform-origin: 100% 50%;
  transform: rotate(-90deg);
}
.bubs-checkout-btn.order-fly-btn .ofb-truck::before { top: 4px; }
.bubs-checkout-btn.order-fly-btn .ofb-truck::after  { bottom: 4px; transform: rotate(90deg); }

.bubs-checkout-btn.order-fly-btn .ofb-back {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 36px;
  border-radius: 2px;
  background: linear-gradient(#FFFFFF, #CDD9ED);
  z-index: 1;
}
.bubs-checkout-btn.order-fly-btn .ofb-front {
  position: absolute;
  left: 56px;
  top: 0;
  width: 24px;
  height: 36px;
  border-radius: 2px 9px 9px 2px;
  overflow: hidden;
}
.bubs-checkout-btn.order-fly-btn .ofb-front::before {
  content: '';
  position: absolute;
  height: 12px;
  width: 2px;
  left: 0;
  top: 12px;
  background: linear-gradient(#6C7486, #3F4656);
}
.bubs-checkout-btn.order-fly-btn .ofb-front::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 22px;
  height: 36px;
  border-radius: 2px 9px 9px 2px;
  background: var(--color-primary);
}
.bubs-checkout-btn.order-fly-btn .ofb-window {
  position: absolute;
  left: 2px;
  top: 0;
  width: 20px;
  height: 36px;
  border-radius: 2px 8px 8px 2px;
  background: rgba(255, 255, 255, 0.18);
  transform: perspective(4px) rotateY(3deg);
  transform-origin: 0 50%;
  overflow: hidden;
  z-index: 1;
}
.bubs-checkout-btn.order-fly-btn .ofb-window::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 13px;
  background: rgba(0, 0, 0, 0.65);
}
.bubs-checkout-btn.order-fly-btn .ofb-window::after {
  content: '';
  position: absolute;
  right: 0;
  top: 7px;
  width: 13px;
  height: 4px;
  background: rgba(255, 255, 255, 0.22);
  transform: skewY(14deg);
  box-shadow: 0 7px 0 rgba(255, 255, 255, 0.22);
}

/* Lights */
.bubs-checkout-btn.order-fly-btn .ofb-light {
  position: absolute;
  left: 76px;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: rgba(255, 215, 110, 1);
  transform-origin: 100% 50%;
  transform: scaleX(0.8);
}
.bubs-checkout-btn.order-fly-btn .ofb-light.top    { top: 4px; }
.bubs-checkout-btn.order-fly-btn .ofb-light.bottom { bottom: 4px; }
.bubs-checkout-btn.order-fly-btn .ofb-light::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  width: 7px;
  height: 4px;
  margin-top: -2px;
  opacity: 0;
  transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255, 215, 110, 1), rgba(255, 215, 110, 0.7), rgba(255, 215, 110, 0));
}

/* Speed lines */
.bubs-checkout-btn.order-fly-btn .ofb-lines {
  position: absolute;
  height: 3px;
  width: 6px;
  border-radius: 2px;
  top: 50%;
  margin-top: -1.5px;
  left: 100%;
  background: var(--color-text-on-dark);
  opacity: 0;
  box-shadow:
    15px 0 0 var(--color-text-on-dark),
    30px 0 0 var(--color-text-on-dark),
    45px 0 0 var(--color-text-on-dark),
    60px 0 0 var(--color-text-on-dark),
    75px 0 0 var(--color-text-on-dark),
    90px 0 0 var(--color-text-on-dark),
    105px 0 0 var(--color-text-on-dark),
    120px 0 0 var(--color-text-on-dark),
    135px 0 0 var(--color-text-on-dark),
    150px 0 0 var(--color-text-on-dark),
    165px 0 0 var(--color-text-on-dark),
    180px 0 0 var(--color-text-on-dark),
    195px 0 0 var(--color-text-on-dark),
    210px 0 0 var(--color-text-on-dark),
    225px 0 0 var(--color-text-on-dark),
    240px 0 0 var(--color-text-on-dark);
}

/* While shipping disable hover transforms */
.bubs-checkout-btn.order-fly-btn.is-shipping {
  pointer-events: none;
  cursor: default;
}
.bubs-checkout-btn.order-fly-btn.is-shipping:hover {
  background: var(--color-primary, #353532);
  transform: none;
  box-shadow: none;
}

/* ── ANIMATION (≈3.4s, scaled-down version of reference) ── */

.bubs-checkout-btn.order-fly-btn.is-shipping .ofb-default { opacity: 0; transition-delay: 0s; }
.bubs-checkout-btn.order-fly-btn.is-shipping .ofb-success { opacity: 1; transition-delay: 2.4s; }
.bubs-checkout-btn.order-fly-btn.is-shipping .ofb-success svg {
  stroke-dashoffset: 0;
  transition-delay: 2.55s;
}

.bubs-checkout-btn.order-fly-btn.is-shipping .ofb-truck {
  animation: ofbTruck 3.4s ease forwards;
  opacity: 1;
}
.bubs-checkout-btn.order-fly-btn.is-shipping .ofb-truck::before {
  animation: ofbDoor1 0.9s ease 0.15s forwards;
}
.bubs-checkout-btn.order-fly-btn.is-shipping .ofb-truck::after {
  animation: ofbDoor2 0.9s ease 0.30s forwards;
}
.bubs-checkout-btn.order-fly-btn.is-shipping .ofb-light::before {
  animation: ofbLight 3.4s ease forwards;
}
.bubs-checkout-btn.order-fly-btn.is-shipping .ofb-box {
  animation: ofbBox 3.4s ease forwards;
}
.bubs-checkout-btn.order-fly-btn.is-shipping .ofb-lines {
  animation: ofbLines 3.4s ease forwards;
}

@keyframes ofbTruck {
  10%, 30% { transform: translateX(-160px); }
  40%      { transform: translateX(-110px); }
  60%      { transform: translateX(-200px); }
  75%, 100%{ transform: translateX(24px); }
}

@keyframes ofbDoor1 {
  30%, 50% { transform: rotate(28deg); }
}
@keyframes ofbDoor2 {
  30%, 50% { transform: rotate(-28deg); }
}

@keyframes ofbLight {
  0%, 30% {
    opacity: 0;
    transform: perspective(2px) rotateY(-15deg) scaleX(0.86);
  }
  40%, 100% {
    opacity: 1;
    transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
  }
}

@keyframes ofbBox {
  8%, 10% { transform: translateX(36px); opacity: 1; }
  25%     { transform: translateX(108px); opacity: 1; }
  26%     { transform: translateX(108px); opacity: 0; }
  27%, 100% { transform: translateX(0); opacity: 0; }
}

@keyframes ofbLines {
  0%, 30% { opacity: 0; transform: scaleY(0.7) translateX(0); }
  35%, 65% { opacity: 1; }
  70%      { opacity: 0; }
  100%     { transform: scaleY(0.7) translateX(-360px); }
}

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  .bubs-checkout-btn.order-fly-btn.is-shipping .ofb-default { opacity: 0; }
  .bubs-checkout-btn.order-fly-btn.is-shipping .ofb-success { opacity: 1; }
  .bubs-checkout-btn.order-fly-btn.is-shipping .ofb-success svg { stroke-dashoffset: 0; }
  .bubs-checkout-btn.order-fly-btn.is-shipping .ofb-truck,
  .bubs-checkout-btn.order-fly-btn.is-shipping .ofb-box,
  .bubs-checkout-btn.order-fly-btn.is-shipping .ofb-lines {
    animation: none;
  }
}