/* زر إتمام الطلب فقط (داخل #cart-submit) بنفس شكل truck-button الأصلي */
#cart-submit > button.truck-btn {
  /* متغيرات الألوان من الكود الأصلي */
  --color: #fff;
  --background: #2B3044;
  --tick: #16BF78;
  --base: #0D0F18;
  --wheel: #2B3044;
  --wheel-inner: #646B8C;
  --wheel-dot: #fff;
  --back: #6D58FF;
  --back-inner: #362A89;
  --back-inner-shadow: #2D246B;
  --front: #A6ACCD;
  --front-shadow: #535A79;
  --front-light: #FFF8B1;
  --window: #2B3044;
  --window-shadow: #404660;
  --street: #646B8C;
  --street-fill: #404660;
  --box: #DCB97A;
  --box-shadow: #B89B66;

  position: relative;
  overflow: hidden;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 16px;
  background: var(--background);
  color: var(--color);
  font-size: 14px;
  font-weight: 500;
  padding-inline: 2.8rem;
  padding-block: 0.8rem;
  transform: translateZ(0);
  transition:
    background-color 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* هوفر بسيط */
#cart-submit > button.truck-btn:hover {
  background: #363c58;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

/* نص الزر */
#cart-submit > button.truck-btn .s-button-text {
  position: relative;
  z-index: 3;
}

/* الطريق داخل الزر */
#cart-submit > button.truck-btn .truck-road {
  position: absolute;
  inset-inline: 14px;
  bottom: 8px;
  height: 3px;
  border-radius: 999px;
  background: #404660;
  overflow: hidden;
  z-index: 1;
}

#cart-submit > button.truck-btn .truck-road::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--street) 0%, var(--street-fill) 40%, var(--street) 100%);
  transform: translateX(-30%);
}

/* الشاحنة – نفس شكل truck-button الأصلي (من الجانب) */
#cart-submit > button.truck-btn .truck {
  position: absolute;
  width: 72px;
  height: 28px;
  bottom: 13px;         /* ارتفاع الشاحنة فوق الطريق */
  inset-inline-start: 18px;
  z-index: 2;
  transform: translateX(-50px); /* نقطة البداية للانيميشن */
}

/* جنط / إطار العجلة (من الكود الأصلي) */
#cart-submit > button.truck-btn .truck:before,
#cart-submit > button.truck-btn .truck:after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: var(--l, 18px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 2;
  box-shadow:
    inset 0 0 0 2px var(--wheel),
    inset 0 0 0 4px var(--wheel-inner);
  background: var(--wheel-dot);
}
#cart-submit > button.truck-btn .truck:after {
  --l: 54px;
}

/* جسم العجلة المليان */
#cart-submit > button.truck-btn .truck .wheel,
#cart-submit > button.truck-btn .truck .wheel:before {
  position: absolute;
  bottom: var(--b, -6px);
  left: var(--l, 6px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wheel);
}
#cart-submit > button.truck-btn .truck .wheel {
  /* نفس موضع العجلة الأمامية */
}
#cart-submit > button.truck-btn .truck .wheel:before {
  content: "";
  --l: 35px;
  --b: 0;
}

/* صندوق الشاحنة الخلفي */
#cart-submit > button.truck-btn .truck .back {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 47px;
  height: 28px;
  border-radius: 1px 1px 0 0;
  background: linear-gradient(
    68deg,
    var(--back-inner) 0%,
    var(--back-inner) 22%,
    var(--back-inner-shadow) 22.1%,
    var(--back-inner-shadow) 100%
  );
}
#cart-submit > button.truck-btn .truck .back:before,
#cart-submit > button.truck-btn .truck .back:after {
  content: "";
  position: absolute;
}
#cart-submit > button.truck-btn .truck .back:before {
  left: 11px;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  border-radius: 0 1px 0 0;
  background: var(--back);
}
#cart-submit > button.truck-btn .truck .back:after {
  border-radius: 1px;
  width: 73px;
  height: 2px;
  left: -1px;
  bottom: -2px;
  background: var(--base);
}

/* مقدمة الشاحنة */
#cart-submit > button.truck-btn .truck .front {
  position: absolute;
  left: 47px;
  bottom: -1px;
  height: 22px;
  width: 24px;
  -webkit-clip-path: polygon(55% 0, 72% 44%, 100% 58%, 100% 100%, 0 100%, 0 0);
  clip-path: polygon(55% 0, 72% 44%, 100% 58%, 100% 100%, 0 100%, 0 0);
  background: linear-gradient(
    84deg,
    var(--front-shadow) 0%,
    var(--front-shadow) 10%,
    var(--front) 12%,
    var(--front) 100%
  );
}
#cart-submit > button.truck-btn .truck .front:before,
#cart-submit > button.truck-btn .truck .front:after {
  content: "";
  position: absolute;
}
/* الزجاج الجانبي الأمامي */
#cart-submit > button.truck-btn .truck .front:before {
  width: 7px;
  height: 8px;
  left: 7px;
  top: 2px;
  -webkit-clip-path: polygon(0 0, 60% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 60% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(
    59deg,
    var(--window) 0%,
    var(--window) 57%,
    var(--window-shadow) 55%,
    var(--window-shadow) 100%
  );
}
/* المصباح الأمامي */
#cart-submit > button.truck-btn .truck .front:after {
  width: 3px;
  height: 2px;
  right: 0;
  bottom: 3px;
  background: var(--front-light);
}

/* الكرتون (الصندوق) */
#cart-submit > button.truck-btn .box {
  position: absolute;
  width: 13px;
  height: 13px;
  right: 56px;
  bottom: 0;
  z-index: 1;
  border-radius: 1px;
  overflow: hidden;
  opacity: 0;
  background: linear-gradient(
    68deg,
    var(--box) 0%,
    var(--box) 50%,
    var(--box-shadow) 50.2%,
    var(--box-shadow) 100%
  );
}
#cart-submit > button.truck-btn .box:before,
#cart-submit > button.truck-btn .box:after {
  content: "";
  position: absolute;
}
#cart-submit > button.truck-btn .box:before {
  background: rgba(255, 255, 255, 0.2);
  left: 0;
  right: 0;
  top: 6px;
  height: 1px;
}
#cart-submit > button.truck-btn .box:after {
  width: 6px;
  left: 100%;
  top: 0;
  bottom: 0;
  background: var(--back);
}

/* تشغيل الأنيميشن عند إضافة truck-active من الجافاسكريبت */
#cart-submit > button.truck-btn.truck-active .truck-road::before {
  animation: truck-road-move 1.4s linear forwards;
}

#cart-submit > button.truck-btn.truck-active .truck {
  animation: truck-move 1.4s ease-in-out forwards;
}

/* تدوير العجلات */
#cart-submit > button.truck-btn.truck-active .truck:before,
#cart-submit > button.truck-btn.truck-active .truck:after,
#cart-submit > button.truck-btn.truck-active .truck .wheel,
#cart-submit > button.truck-btn.truck-active .truck .wheel:before {
  animation: truck-wheels 1.4s linear forwards;
}

/* حركة الصندوق للخلف */
#cart-submit > button.truck-btn.truck-active .box {
  animation: truck-box-drop 1.2s ease-out forwards;
}

/* الطريق يتحرك */
@keyframes truck-road-move {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(30%); }
}

/* الشاحنة من اليسار لليمين */
@keyframes truck-move {
  0%   { transform: translateX(-50px); }
  20%  { transform: translateX(0); }
  70%  { transform: translateX(0); }
  100% { transform: translateX(70px); }
}

/* دوران العجلات */
@keyframes truck-wheels {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* سقوط الكرتون للخلف */
@keyframes truck-box-drop {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  20% {
    opacity: 1;
    transform: translate(-6px, -6px);
  }
  100% {
    opacity: 0;
    transform: translate(-28px, 10px);
  }
}