.purchase-dock {
  background: #073f3b;
  border-top: 2px solid #10b981;
  box-shadow: 0 -12px 28px rgba(7, 63, 59, 0.24);
}

.purchase-dock__container {
  padding-top: 12px !important;
  padding-bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 8px) !important;
}

.purchase-dock__panel {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.purchase-dock__share-group {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.purchase-dock__label {
  color: #d1fae5 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 14px;
}

.purchase-dock__stepper {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 4px;
  background: #fff !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.purchase-dock__step-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  color: #064e3b !important;
  background: #e7f7ef !important;
  border: 1px solid #b7e4cf;
  border-radius: 10px;
  touch-action: manipulation;
}

.purchase-dock__step-btn svg {
  width: 20px !important;
  height: 20px !important;
}

.purchase-dock__step-btn:disabled {
  opacity: 0.38 !important;
  cursor: not-allowed;
}

.purchase-dock__count {
  min-width: 35px !important;
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 44px;
  font-variant-numeric: tabular-nums;
}

.purchase-dock__pay {
  flex: 1 1 0% !important;
  min-width: 0;
  max-width: none !important;
  height: 56px !important;
  min-height: 56px;
  padding: 0 10px !important;
  color: #0f172a !important;
  background: #fbbf24 !important;
  border: 1px solid #fcd34d;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  white-space: nowrap;
  touch-action: manipulation;
}

.purchase-dock__pay svg {
  color: #78350f !important;
}

.purchase-dock__pay:disabled {
  opacity: 0.65 !important;
  cursor: wait;
}

@media (max-width: 350px) {
  .purchase-dock__panel { gap: 7px; }
  .purchase-dock__pay { font-size: 13px !important; }
}